/* Pixel type for the SUPERHOT theme — self-hosted latin subsets of two SIL OFL fonts (DotGothic16, VT323). A browser only downloads these when a page actually renders text in them, so every other theme costs nothing. */ /* Fraunces (SIL OFL) — a variable soft serif; with its SOFT axis maxed it reads like the plump retro Cooper-Black lettering of the Short n' Sweet era. Used by the Sabrina Carpenter theme only, so it's fetched only there. */ /* ---------- Design tokens ---------- Primitives are never used in components; components read only these semantic tokens, and every :root[data-theme="…"] block below overrides the same names (a theme may skip any it keeps from Midnight): surfaces --bg --surface --surface-2 --surface-3 --border --border-strong --overlay text --text --text-2 --text-3 brand --accent --accent-soft --accent-2 --focus status --good --good-soft --good-strong --warn --warn-soft --bad --bad-soft --bad-strong --info --info-soft --waiting data --data --data-soft (charts; the accent is for actions and "live", never for bars) text-link --accent-text (accent for text; darker than the button accent on light grounds) shape --radius --radius-sm --radius-lg --shadow --shadow-lg type --font --font-display The bootstrap sets data-theme from localStorage before this file applies, so no theme ever flashes the defaults. */ :root { --bg: #0b0d10; --surface: #14171c; --surface-2: #1b1f26; --surface-3: #23272f; --border: #262b33; --text: #f2f3f5; --text-2: #9aa2ad; --text-3: #8b93a0; --accent: #fe2c55; --accent-soft: rgba(254, 44, 85, 0.14); --accent-solid: color-mix(in srgb, var(--accent) 86%, #000); /* filled buttons: white text reaches 4.5:1 on every theme accent */ --good: #29d398; --good-soft: rgba(41, 211, 152, 0.14); --warn: #ffb020; --warn-soft: rgba(255, 176, 32, 0.14); --waiting: #7a8290; /* status */ --bad: #ff6b7f; --bad-soft: rgba(255, 107, 127, 0.14); --bad-strong: #e5484d; --good-strong: #2fbf71; --info: #4d95f5; --info-soft: rgba(77, 149, 245, 0.14); /* data (charts) + accent as text */ --data: #4d95f5; --data-soft: rgba(77, 149, 245, 0.2); --accent-text: var(--accent); /* accent companions */ --accent-2: #ff7a9d; --focus: color-mix(in srgb, var(--accent) 55%, transparent); /* structure */ --border-strong: color-mix(in srgb, var(--text-3) 55%, var(--border)); --overlay: rgba(0, 0, 0, 0.55); --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.35); --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --font-display: var(--font); /* type scale: five steps, every heading and label picks one */ --fs-page: 22px; /* page title */ --fs-card: 17px; /* card title */ --fs-panel: 15px; /* panel / row title */ --fs-body: 13.5px; /* body and tables */ --fs-meta: 12px; /* timestamps, sub-lines, chips */ --fs-micro: 11px; /* chart axis labels only */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: dark; } :root[data-theme="light"] { --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f0f1f4; --surface-3: #e8eaee; --border: #e3e5ea; --text: #14171c; --text-2: #565d68; --text-3: #626a78; --shadow: 0 8px 24px rgba(20, 23, 28, 0.08); --shadow-lg: 0 10px 28px rgba(20, 23, 28, 0.10); --overlay: rgba(20, 23, 28, 0.35); color-scheme: light; } /* ---- extra themes. Each is a complete token set so every component that reads var(--…) just works; 'dark' (Midnight, the :root defaults) and 'light' (Daylight) stay the two family defaults. ---- */ :root[data-theme="void"] { --bg: #000000; --surface: #0a0a0a; --surface-2: #121212; --surface-3: #1a1a1a; --border: #232323; --text: #f5f5f5; --text-2: #9a9a9a; --text-3: #8d8d8d; --shadow: 0 8px 24px rgba(0, 0, 0, 0.6); color-scheme: dark; } :root[data-theme="ocean"] { --bg: #071120; --surface: #0d1b2e; --surface-2: #12233a; --surface-3: #182c46; --border: #1f3552; --text: #eef4fb; --text-2: #93a7c0; --text-3: #8497ad; --accent: #4fa3ff; --accent-soft: rgba(79, 163, 255, 0.16); --shadow: 0 8px 24px rgba(0, 6, 20, 0.45); color-scheme: dark; } :root[data-theme="forest"] { --bg: #08120d; --surface: #0f1c15; --surface-2: #14241b; --surface-3: #1a2e22; --border: #21382b; --text: #eef7f0; --text-2: #95ad9c; --text-3: #869b8d; --accent: #9be15d; --accent-soft: rgba(155, 225, 93, 0.16); --shadow: 0 8px 24px rgba(0, 10, 4, 0.45); color-scheme: dark; } :root[data-theme="grape"] { --bg: #0f0a1a; --surface: #17102a; --surface-2: #1e1636; --surface-3: #271d44; --border: #2f2552; --text: #f3eefc; --text-2: #a99cc4; --text-3: #9b90b6; --accent: #b06cff; --accent-soft: rgba(176, 108, 255, 0.16); --shadow: 0 8px 24px rgba(8, 2, 20, 0.5); color-scheme: dark; } :root[data-theme="sunset"] { --bg: #140c0a; --surface: #1e1310; --surface-2: #281a15; --surface-3: #33221b; --border: #40291f; --text: #fbf1ea; --text-2: #c0a394; --text-3: #ab9384; --accent: #ff7a45; --accent-soft: rgba(255, 122, 69, 0.16); --shadow: 0 8px 24px rgba(20, 6, 0, 0.5); color-scheme: dark; } :root[data-theme="slate"] { --bg: #0f1114; --surface: #161a1f; --surface-2: #1d2228; --surface-3: #252b32; --border: #2c333b; --text: #eef0f3; --text-2: #9aa3ad; --text-3: #8c95a1; --accent: #8b95a3; --accent-soft: rgba(139, 149, 163, 0.16); --shadow: 0 8px 24px rgba(0, 0, 0, 0.4); color-scheme: dark; } :root[data-theme="paper"] { --bg: #f6f1e7; --surface: #fffdf8; --surface-2: #f1ebdf; --surface-3: #e9e1d2; --border: #e2d9c8; --text: #1f1a14; --text-2: #5f5648; --text-3: #736858; --accent: #b45309; --accent-soft: rgba(180, 83, 9, 0.14); --shadow: 0 8px 24px rgba(60, 40, 10, 0.08); color-scheme: light; } :root[data-theme="sky"] { --bg: #eef4fb; --surface: #ffffff; --surface-2: #e7eef8; --surface-3: #dde7f3; --border: #d6e0ec; --text: #0f1a2a; --text-2: #4e5f75; --text-3: #5e7088; --accent: #2563eb; --accent-soft: rgba(37, 99, 235, 0.14); --shadow: 0 8px 24px rgba(15, 26, 42, 0.08); color-scheme: light; } :root[data-theme="candy"] { --bg: #fbeef4; --surface: #ffffff; --surface-2: #f7e3ec; --surface-3: #f1d7e3; --border: #ecd0dc; --text: #24101a; --text-2: #6b4a58; --text-3: #7d5f6d; --accent: #e0117f; --accent-soft: rgba(224, 17, 127, 0.14); --shadow: 0 8px 24px rgba(36, 16, 26, 0.08); color-scheme: light; } :root[data-theme="mint"] { --bg: #eefaf3; --surface: #ffffff; --surface-2: #e3f4ea; --surface-3: #d8ede1; --border: #cfe6d8; --text: #0f1f17; --text-2: #4b6656; --text-3: #587263; --accent: #0f9d6e; --accent-soft: rgba(15, 157, 110, 0.14); --shadow: 0 8px 24px rgba(15, 31, 23, 0.08); color-scheme: light; } /* ---- Flipvault: the shop brand. Vault black, copper, Unbounded for display, Plex Mono for numbers. ---- */ :root[data-theme="flipvault"] { --bg: #121214; --surface: #1a1a1d; --surface-2: #222226; --surface-3: #2b2b30; --border: #2e2e33; --text: #f2eee8; --text-2: #b8b3ac; --text-3: #8e8a85; --accent: #c7743a; --accent-soft: rgba(199, 116, 58, 0.18); --accent-2: #e39a62; --data: #c9cdd2; --data-soft: rgba(201, 205, 210, 0.16); --shadow: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); --font-display: "Unbounded", var(--font); color-scheme: dark; } /* ---- novelty themes: these also swap the typeface and corner radius. ---- */ :root[data-theme="comiwalls"] { --bg: #fff8e6; --surface: #ffffff; --surface-2: #fff1cc; --surface-3: #ffe9b3; --border: #f2d68a; --text: #2b1d3a; --text-2: #6a5480; --text-3: #7d6a92; --accent: #ff2d95; --accent-soft: rgba(255, 45, 149, 0.16); --radius: 22px; --radius-sm: 14px; --shadow: 0 8px 24px rgba(120, 60, 0, 0.12); --font: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Comic Sans", cursive; color-scheme: light; } /* SUPERHOT — modelled on the piOS Discord theme's dark mode: pure black, pure red, white bitmap type, hairline gray borders, square corners, and CRT scanlines over everything. Cyan stands in for "good" like piOS does. */ :root[data-theme="superhot"] { --bg: #000000; --surface: #000000; --surface-2: #0a0a0a; --surface-3: #141414; --border: #6e6e6e; --text: #f4f4f4; --text-2: #c7cfd2; --text-3: #7d868a; --accent: #ff0000; --accent-soft: rgba(255, 0, 0, 0.22); --good: #4ff0ff; --good-soft: rgba(79, 240, 255, 0.16); --radius: 0px; --radius-sm: 0px; --shadow: none; --font: "DotGothic16", "VT323", "Fixedsys", "Perfect DOS VGA 437", ui-monospace, monospace; color-scheme: dark; } /* piOS has no rounded corners anywhere — including components that hard-code their own radius instead of reading the token (auth card, avatars, pills). */ /* ---- SUPERHOT motion: SUPER./HOT. flipping beside the brand, views that snap in on pixel steps, titles with a red-cyan aberration glitch and a blinking red block, a blinking nav marker, a red tear line sweeping the screen, and a slice glitch on card hover. Transform/opacity/clip only; off in TV mode. ---- */ @keyframes sh-word { 0%, 49% { content: "SUPER."; } 50%, 100% { content: "HOT."; } } @keyframes sh-tear { 0% { transform: translateY(-4px); opacity: 0; } 2% { opacity: 1; } 14% { transform: translateY(100vh); opacity: 1; } 15%, 100% { transform: translateY(100vh); opacity: 0; } } @keyframes sh-in { from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes sh-aberr { 0% { text-shadow: -3px 0 #ff0000, 3px 0 #4ff0ff; transform: translateX(2px); } 50% { text-shadow: 2px 0 #ff0000, -2px 0 #4ff0ff; transform: translateX(-1px); } 100% { text-shadow: none; transform: none; } } @keyframes sh-caret { 50% { opacity: 0; } } @keyframes sh-blink { 50% { opacity: .25; } } @keyframes sh-glitch { 0% { transform: translate(2px, -1px); clip-path: inset(0 0 60% 0); } 34% { transform: translate(-2px, 1px); clip-path: inset(40% 0 0 0); } 67% { transform: translate(1px, 0); clip-path: inset(20% 0 30% 0); } 100% { transform: none; clip-path: none; } } :root[data-theme="retro95"] { --bg: #5aa8e8; --surface: #ffffff; --surface-2: #ece9d8; --surface-3: #e1ddd0; --border: #a0b3c9; --text: #000000; --text-2: #333333; --text-3: #6f6f6f; --accent: #316ac5; --accent-soft: rgba(49, 106, 197, 0.18); --radius: 3px; --radius-sm: 0px; --shadow: 2px 2px 8px rgba(0, 0, 0, 0.35); --font: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif; color-scheme: light; } /* ---- Retro XP: Windows XP "Luna" over a Bliss-style hill. The big panels are windows: blue frame, gradient title bar, buttons top-right. The chrome is painted as background layers under a transparent top border, so it survives overflow clipping (modals still scroll) and never touches positioning (the sidebar still sticks). ---- */ /* modals keep their real close button (styled as the red one) so they stay closable */ /* room for the taskbar without a page-wide scroll: the shell ends above it and the content column pads itself; the sticky sidebar matches the shell height */ /* XP controls */ /* taskbar: Luna blue bar, green Start, tray block at right. Off in TV mode. */ :root[data-theme="terminal"] { --bg: #020603; --surface: #071009; --surface-2: #0b170e; --surface-3: #102015; --border: #164a24; --text: #4dff7a; --text-2: #2fcf5c; --text-3: #1f8f40; --accent: #0f8f3a; --accent-soft: rgba(15, 143, 58, 0.22); --good: #4dff7a; --warn: #ffd23f; --radius: 4px; --radius-sm: 3px; --shadow: 0 0 18px rgba(77, 255, 122, 0.12); --font: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; color-scheme: dark; } /* ---- Terminal motion: CRT power-on, scanlines with a rolling refresh band and the odd flicker, titles that type in with a block caret on every tab switch, a blinking brand cursor, a slow pulse on the active nav glow. Transform and opacity only, so Live Assist repaints stay cheap; off in TV mode. ---- */ @keyframes term-roll { from { transform: translateY(0); } to { transform: translateY(140vh); } } @keyframes term-flicker { 0%, 100% { opacity: 1; } 11% { opacity: .82; } 12% { opacity: 1; } 47% { opacity: .9; } 48% { opacity: 1; } 79% { opacity: .86; } 80% { opacity: 1; } } @keyframes term-on { 0% { transform: scaleY(.004) scaleX(1.25); filter: brightness(6) saturate(2); opacity: .6; } 35% { transform: scaleY(1) scaleX(1.03); filter: brightness(2.2); opacity: 1; } 60% { transform: none; filter: brightness(1.15); } 100% { transform: none; filter: none; } } @keyframes term-type { from { max-width: 0; } to { max-width: 32ch; } } @keyframes term-caret { 50% { border-color: transparent; } } @keyframes term-blink { 50% { opacity: .15; } } @keyframes term-pulse { 0%, 100% { text-shadow: 0 0 6px rgba(77, 255, 122, .35); } 50% { text-shadow: 0 0 14px rgba(77, 255, 122, .85), 0 0 28px rgba(77, 255, 122, .35); } } :root[data-theme="papyrus"] { --bg: #efe4cc; --surface: #f8f0dc; --surface-2: #ede2c6; --surface-3: #e4d7b6; --border: #cfbf98; --text: #3b2a14; --text-2: #6f5a36; --text-3: #987f57; --accent: #8b5e34; --accent-soft: rgba(139, 94, 52, 0.16); --radius: 6px; --radius-sm: 4px; --shadow: 0 8px 24px rgba(80, 50, 10, 0.12); --font: Papyrus, "Papyrus", fantasy; color-scheme: light; } /* Sabrina Carpenter — Short n' Sweet: powder-blue sky with soft clouds, cream and blush surfaces, cherry-red accent, espresso text, retro serif headings. */ :root[data-theme="sabrina"] { --bg: #d7e9fb; --surface: #fffaf3; --surface-2: #fbeef2; --surface-3: #f6e2e8; --border: #f0cfd8; --text: #3a2420; --text-2: #7a5a58; --text-3: #a78b8a; --accent: #e0304c; --accent-soft: rgba(224, 48, 76, 0.14); --radius: 18px; --radius-sm: 12px; --shadow: 0 10px 28px rgba(160, 80, 100, 0.14); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* body stays readable; the serif lives in headings */ color-scheme: light; } /* ---- GGO Kirito — modelled on the piOS-era Discord theme of the same name: black glass panels over a dark crimson field, red laser streaks behind the UI, red glow on what's active. No character art is bundled; drop your own at public/wallpapers/ggo-kirito.jpg and it shows through the glass. ---- */ :root[data-theme="ggo"] { --bg: #07050a; --surface: rgba(12, 9, 15, 0.86); --surface-2: rgba(28, 16, 22, 0.86); --surface-3: rgba(44, 24, 32, 0.88); --border: rgba(255, 255, 255, 0.13); --text: #f4f2f6; --text-2: #c9c3cc; --text-3: #8a838f; --accent: #ff2436; --accent-soft: rgba(255, 36, 54, 0.2); --radius: 10px; --radius-sm: 7px; --shadow: 0 12px 32px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* Wallpaper + crimson washes on one static fixed layer. The image is a pre-softened, pre-darkened 1920x1080 derivative (ggo-kirito-soft.jpg) so no filter runs at render time: Live Assist repaints its feed every few seconds and must not pay for a blur each time. */ /* Glass blur only where it is static and cheap: the sidebar, top bar, modals and the sign-in card. Content cards are just translucent. Blurring behind dozens of rows that re-render live is what made Live Assist lag. */ /* ---- GGO Kirito motion: the key art drifts with a monitor flicker, the laser field drifts on its own layer, a photon bullet streaks across every seven seconds, views slide in with a red-blue split on the title and a HUD line drawing under it, a target ping on the brand dot, breathing red glow on the active nav and primary buttons, cards lift with a red edge on hover. Transform and opacity only; all overlays off in TV mode. ---- */ /* Pixelify Sans (SIL OFL) — the blocky pixel face the Minecraft theme uses. Latin subset, self-hosted, fetched only under that theme. */ /* ---- Minecraft: the pause-menu look. Dimmed dirt behind everything, stone panels and buttons with the light-top/dark-bottom bevel, black text fields, grass-green accent, pixel type with the drop shadow. The dirt tile is drawn fresh, not the game's. ---- */ :root[data-theme="minecraft"] { --bg: #2b1d14; --surface: #4b4b4b; --surface-2: #3d3d3d; --surface-3: #5c5c5c; --border: #2e2e2e; --text: #ffffff; --text-2: #d8d8d8; --text-3: #a8a8a8; --accent: #53a83a; --accent-soft: rgba(83, 168, 58, 0.25); --good: #7ef23f; --good-soft: rgba(126, 242, 63, 0.18); --warn: #f9c92c; --warn-soft: rgba(249, 201, 44, 0.18); --radius: 0px; --radius-sm: 0px; --shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); --font: "Pixelify Sans", "Press Start 2P", "VT323", monospace; color-scheme: dark; } /* stone buttons; hover goes the in-game blue with yellow text */ /* ---- Minecraft motion: the yellow splash beside the brand pulsing and cycling lines, torchlight flicker over the dirt, views dropping in like a placed block, buttons pressing into their bevel, the brand dot bobbing like a dropped item, the selection frame snapping onto the active nav, toasts sliding up as achievement panels. Transform/opacity only. ---- */ /* ---- Pokémon: the Gen-1 handheld UI in the brand palette. Poké-red band across the top of the page over a black stripe, white boxes with the double-line black frame, logo-yellow selection, pixel type on headings and controls. Colours and shapes only, no game art. ---- */ :root[data-theme="pokemon"] { --bg: #f3f3f3; --surface: #ffffff; --surface-2: #f6f6f6; --surface-3: #ececec; --border: #1a1a1a; --text: #1a1a1a; --text-2: #444444; --text-3: #7a7a7a; --accent: #e3350d; --accent-soft: rgba(227, 53, 13, 0.14); --good: #3fa34d; --good-soft: rgba(63, 163, 77, 0.16); --warn: #d9a400; --warn-soft: rgba(255, 203, 5, 0.22); --radius: 8px; --radius-sm: 5px; --shadow: 4px 4px 0 #1a1a1a; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: light; } /* the red band is drawn by the page header itself, so it always covers exactly the header text whatever its height: Poké-red banner, black stripe below */ /* page headers sit on the red band, so they go white there */ /* the brand dot is a Poké Ball: red top, black band, white bottom, centre button */ /* ---- Pokémon motion: the battle intro on every tab switch (two flashes, then a stepped wipe), titles printing like dialog text with the blinking "press A" arrow, the Poké Ball wobbling like a catch, a blinking menu cursor on nav hover, comic press/pop on buttons and cards, toasts as text boxes. ---- */ @keyframes pk-flash { 0%, 100% { filter: none; } 10% { filter: brightness(2.2) contrast(.6); } 20% { filter: none; } 35% { filter: brightness(2.2) contrast(.6); } 45% { filter: none; } } @keyframes pk-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes pk-type { from { max-width: 0; } to { max-width: 34ch; } } @keyframes pk-arrow { 50% { transform: translateY(3px); } } @keyframes pk-wobble { 0%, 40%, 100% { transform: rotate(0); } 8% { transform: rotate(-26deg); } 16% { transform: rotate(0); } 24% { transform: rotate(26deg); } 32% { transform: rotate(0); } } @keyframes pk-blink { 50% { opacity: 0; } } @keyframes pk-toast { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } /* Pricedown Bl (Typodermic, free for personal use) — the GTA wordmark face. */ /* ---- GTA VI: Vice City at sunset. The official key art (dimmed) behind translucent violet glass, a pink-orange-violet wash, palm silhouettes along the bottom, the official VI logo (SVG) in the sidebar foot, and Pricedown on the headings with the sunset gradient. Assets: public/wallpapers/gta6-*. ---- */ :root[data-theme="gta6"] { --bg: #120a1f; --surface: rgba(24, 12, 42, 0.86); --surface-2: rgba(42, 20, 66, 0.86); --surface-3: rgba(60, 30, 92, 0.9); --border: rgba(255, 130, 210, 0.22); --text: #fff5fb; --text-2: #e6c9f3; --text-3: #b08fcb; --accent: #ff2d95; --accent-soft: rgba(255, 45, 149, 0.22); --warn: #ffb020; --good: #3ef0b8; --good-soft: rgba(62, 240, 184, 0.16); --radius: 12px; --radius-sm: 8px; --shadow: 0 12px 32px rgba(0, 0, 0, 0.5); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: dark; } /* the official logo lives in the sidebar foot, above the account card */ /* the nav gives way so the foot (logo + account) always fits — it scrolls, but never shows a bar */ @media (min-height: 900px) { :root[data-theme="gta6"] .sidebar-foot::before { height: 112px; } } /* ---- GTA VI motion: palms sway, the sunset gradient slides through the brand with a neon stutter now and then, a light sweep runs across the logo (masked to its shape), views rise in, a gradient rule draws under each page title, the active nav glow breathes, cards lift with a pink glow on hover. Transform, opacity and small background-position moves only. ---- */ @media (min-height: 900px) { :root[data-theme="gta6"] .sidebar-foot::after { height: 112px; } } /* Pacifico (SIL OFL) — the signature-style script the Sabrina Carpenter theme uses for headings. Latin subset, fetched only under that theme. */ /* ---- Sabrina Carpenter, everyday edition: script only on page titles, soft-serif section headings, system body text for reading data all day, a faint static heart pattern behind the UI (never over it, never on the TV screen), pill primary buttons, pink scrollbars. No cursor tricks, no ribbons, no motion. ---- */ :root[data-theme="sabrina"] { --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 28px rgba(160, 80, 100, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; } body { min-height: 100vh; } /* Theme changes fade everywhere, but transform/box-shadow are only animated on the elements that actually move — a wildcard on those keeps every table cell and card in the compositor's way. */ * { transition: background-color .15s ease, border-color .15s ease, color .15s ease; } button, .chip, .nav-item, .hm2-metric, .hm2-card-slim, .pay-person, .inv-cat, .theme-card, .home-card, .icon-btn, .icon-btn-sm { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } a { color: inherit; } /* form controls follow the page typeface so a theme's font swap reaches them too */ button, input, select, textarea { font-family: inherit; } /* ---------- shared interaction feel ---------- */ /* A light hover-lift + press-down on anything clickable, and a couple of reusable entrance keyframes used by modals/toast/expandable panels below — kept to opacity + small transforms so it stays "subtle", not bouncy. */ .nav-item, .icon-btn, .chip, .btn-secondary, .add-form button, .auth-submit, .discord-connect-btn, .icon-btn-sm, .remove-btn, .flag-btn, .modal-close, #createInviteBtn, #createRoleBtn { transform: translateZ(0); /* own layer so the scale below doesn't repaint neighbors */ } .nav-item:active, .icon-btn:active, .chip:active, .btn-secondary:active, .add-form button:active, .auth-submit:active, .discord-connect-btn:active, .icon-btn-sm:active, .remove-btn:active, .flag-btn:active, .modal-close:active { transform: scale(.97); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .session-row:hover, .invite-row:hover, .user-row:hover, .role-card:hover, .flag-request-row:hover, .activity-row:hover, .design-row:hover { transform: translateY(-1px); } @keyframes riseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes scaleIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .container { flex: 1; min-width: 0; max-width: 1180px; margin: 0 auto; padding: 30px 28px 80px; width: 100%; } /* ---------- app shell: sidebar + main ---------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: 236px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--bg)), var(--bg)); border-right: 1px solid var(--border); padding: 20px 12px 14px; overflow-y: auto; z-index: 25; } .sidebar-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; letter-spacing: -0.01em; padding: 4px 10px 16px; border-radius: 9px; cursor: pointer; } .sidebar-brand:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; } .brand-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .brand-eyebrow { display: none; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .sidebar-brand.has-ws .brand-eyebrow { display: block; } .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-caret { margin-left: auto; flex-shrink: 0; color: var(--text-3); transition: transform .15s, color .15s; } .sidebar-brand:hover .brand-caret { color: var(--text); } .sidebar-brand[aria-expanded="true"] .brand-caret { transform: rotate(180deg); } /* workspace switcher — portalled to , positioned under the brand row */ .ws-menu { position: fixed; z-index: 210; width: min(264px, calc(100vw - 28px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg, 0 12px 34px rgba(0,0,0,.35)); padding: 6px; } .ws-menu-head { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 6px; } .ws-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; color: var(--text); font: inherit; } .ws-row:hover, .ws-row:focus-visible { background: var(--surface-2); outline: none; } .ws-row.is-current { background: var(--accent-soft); } .ws-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex-shrink: 0; } .ws-ico svg { width: 15px; height: 15px; } .ws-row.is-current .ws-ico { background: var(--accent); color: #fff; } .ws-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ws-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-sub { font-size: 11px; color: var(--text-3); } .ws-check { color: var(--accent); flex-shrink: 0; opacity: 0; } .ws-row.is-current .ws-check { opacity: 1; } .ws-menu-foot { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; } .ws-foot-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; } .ws-foot-btn:hover { background: var(--surface-2); color: var(--text); } .ws-form { display: flex; gap: 6px; align-items: center; padding: 4px 4px 2px; } .ws-form input { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; } .ws-form input:focus { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; } .ws-form .btn-primary { padding: 7px 11px; font-size: 12.5px; } .ws-form-x { background: none; border: none; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .ws-form-x:hover { color: var(--text); background: var(--surface-2); } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px 1px color-mix(in srgb, var(--accent) 55%, transparent); } .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 18px; } .nav-item { display: flex; align-items: center; gap: 10px; border: none; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; text-align: left; padding: 8px 10px; border-radius: 9px; cursor: pointer; position: relative; } .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .75; } .nav-item:hover { color: var(--text); background: var(--surface-2); } .nav-item.active { color: var(--accent); background: var(--accent-soft); } .nav-item.active svg { opacity: 1; } .nav-item.active::before { content: ''; position: absolute; left: -12px; top: 20%; bottom: 20%; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; } .sidebar-foot { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px 0; border-top: 1px solid var(--border); } .icon-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; } .icon-btn:hover { color: var(--text); border-color: var(--text-3); } /* mobile drawer */ /* Phone top bar: menu, where you are, and the screen's one primary action. Desktop never shows it. */ .topbar { display: none; } .menu-btn { width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; } .topbar-title { flex: 1; min-width: 0; font-size: var(--fs-panel); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-action { background: var(--accent-solid); color: #fff; border: none; font-weight: 800; font-size: var(--fs-meta); padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .topbar-action[hidden] { display: none; } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 28; animation: fadeIn .15s ease; } .sidebar-backdrop[hidden] { display: none; } @media (max-width: 900px) { .topbar { display: flex; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 52px; padding: 0 12px; padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .topbar-owned { display: none !important; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; transform: translateX(-100%); transition: transform .22s cubic-bezier(.16, 1, .3, 1); box-shadow: none; z-index: 30; width: 260px; background: var(--surface); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow); } .container { padding-top: calc(64px + env(safe-area-inset-top)); } } @media (max-width: 420px) { .account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ---------- views ---------- */ .view { display: none; } .view.active { display: block; animation: fadeIn .2s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .panel-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .add-form { display: flex; gap: 8px; flex: 1; min-width: 260px; max-width: 420px; } .add-form input { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 9px 13px; border-radius: var(--radius-sm); font-size: 13.5px; outline: none; } .add-form input:focus { border-color: var(--accent); } .add-form button { background: var(--accent); color: #fff; border: none; font-weight: 700; font-size: 13.5px; padding: 9px 18px; border-radius: var(--radius-sm); cursor: pointer; } .add-form button:hover { filter: brightness(1.08); } .add-form button:disabled { opacity: .5; cursor: default; } .inline-status { font-size: 13px; margin: -8px 0 14px; min-height: 18px; } .inline-status.error { color: var(--bad); } .inline-status.ok { color: var(--good); } /* Admin-only controls (isSystemAdmin, not a grantable permission) */ body:not(.is-admin) .admin-only { display: none; } #aiSettingsForm textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-meta); line-height: 1.5; } #aiSettingsForm .auth-hint a { color: var(--accent); font-weight: 700; text-decoration: none; } #aiSettingsForm .auth-hint a:hover { text-decoration: underline; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .chip:hover { color: var(--text); } .chip.active { background: var(--text); color: var(--bg); border-color: transparent; } /* ---------- cards ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: relative; display: flex; flex-direction: column; gap: 12px; } .card-head { display: flex; align-items: center; gap: 11px; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); object-fit: cover; flex-shrink: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--text-3); } .card.waiting .avatar { filter: grayscale(1); opacity: .6; } .card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .card-title a { font-weight: 700; font-size: var(--fs-panel); text-decoration: none; } .card-title a:hover { text-decoration: underline; } .status-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); font-weight: 600; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .waiting-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--waiting); } .remove-btn { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: var(--text-3); cursor: pointer; font-size: 13px; display: grid; place-items: center; } .remove-btn:hover { background: var(--warn-soft); color: var(--warn); } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; } .stat { font-size: 12.5px; color: var(--text-2); display: flex; align-items: baseline; gap: 5px; min-width: 0; } .stat b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; } .flag-badge { background: var(--warn-soft); color: var(--warn); border-radius: 999px; font-size: var(--fs-meta); font-weight: 700; padding: 1px 6px; margin-left: 3px; } .pill-row { display: flex; flex-wrap: wrap; gap: 6px; } .auction-pill { font-size: var(--fs-meta); font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; } .gift-pill { font-size: var(--fs-meta); font-weight: 700; color: var(--warn); background: var(--warn-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .card-actions { display: flex; gap: 8px; margin-top: auto; } .btn-secondary { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; } .btn-secondary:hover { background: var(--surface-3); } /* The one primary per screen. Same metrics as .btn-secondary so the two sit on a row together. */ .btn-primary { background: var(--accent-solid); color: #fff; border: 1px solid transparent; font-weight: 800; font-size: 12.5px; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; } .btn-primary:hover { filter: brightness(1.08); } .btn-primary:disabled { opacity: .55; cursor: default; } .waiting-meta { font-size: 12.5px; color: var(--text-2); line-height: 1.6; } .waiting-meta b { color: var(--text); font-weight: 600; } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-3); font-size: 13.5px; } /* ---------- loading (2026-09-19, second pass: quiet and seamless) ---------- Wherever "Loading…" used to be there is now a few soft lines of placeholder text with a slow light passing over them, in the surface tones of the theme (no accent colour, nothing bouncing). It stays invisible for the first 160ms, so anything that answers quickly never flashes a loader at all. Markup: */ .fl-load { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; width: min(240px, 100%); margin: 2px auto; line-height: 0; opacity: 0; animation: fl-appear .4s ease-out .16s forwards; } .fl-load::before, .fl-load::after, .fl-load i { content: ""; display: block; height: 8px; border-radius: 999px; background: linear-gradient(100deg, var(--surface-2) 35%, color-mix(in srgb, var(--surface-3) 82%, var(--text)) 50%, var(--surface-2) 65%) 100% 0 / 300% 100%; animation: fl-shimmer 1.9s cubic-bezier(.4, 0, .2, 1) infinite; } .fl-load::before { width: 44%; } .fl-load i { width: 86%; } .fl-load::after { width: 63%; } @keyframes fl-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } @keyframes fl-appear { to { opacity: 1; } } /* in a whole empty panel the lines get the room of a paragraph */ .empty-state > .fl-load:only-child, .pay-empty > .fl-load:only-child, .transcript-empty > .fl-load:only-child { width: min(460px, 100%); gap: 13px; } .empty-state > .fl-load:only-child::before, .empty-state > .fl-load:only-child::after, .empty-state > .fl-load:only-child i, .pay-empty > .fl-load:only-child::before, .pay-empty > .fl-load:only-child::after, .pay-empty > .fl-load:only-child i, .transcript-empty > .fl-load:only-child::before, .transcript-empty > .fl-load:only-child::after, .transcript-empty > .fl-load:only-child i { height: 11px; } /* a tab switch: a hairline that runs ahead and completes when the tab is ready. It only appears if the switch takes longer than a moment (app.js routeLoad), so quick switches show nothing; the new view fades in rather than popping. */ .route-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 4000; pointer-events: none; opacity: 0; } .route-bar i { display: block; height: 100%; width: 0; border-radius: 0 2px 2px 0; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); } .route-bar.on { opacity: 1; transition: opacity .2s ease; } .route-bar.on i { width: 82%; transition: width 3.2s cubic-bezier(.06, .72, .12, 1); } .route-bar.done { opacity: 0; transition: opacity .35s ease .18s; } .route-bar.done i { width: 100%; transition: width .2s ease-out; } .view.active { animation: view-in .22s ease-out; } @keyframes view-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fl-load { animation-duration: .01s; } .fl-load::before, .fl-load::after, .fl-load i { animation: none; background: var(--surface-2); } .route-bar.on i, .route-bar.done i { transition: none; } .view.active { animation: none; } } /* ---------- stats table ---------- */ .stats-header { margin-bottom: 16px; } .stats-header h2 { margin: 0 0 4px; font-size: var(--fs-page); } .muted { color: var(--text-3); font-size: 12.5px; margin: 0; } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; } th, td { padding: 12px 14px; text-align: left; white-space: nowrap; } thead th { color: var(--text-3); font-size: 12px; border-bottom: 1px solid var(--border); font-weight: 700; } tbody tr { border-bottom: 1px solid var(--border); } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--surface-2); } td.num { font-variant-numeric: tabular-nums; } .ratio-strong { font-weight: 800; font-size: 14px; } .spark-bar.has-data { background: var(--data); } .dim { color: var(--text-3); } .wl-platform-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .wl-dot-tiktok { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .wl-dot-whatnot { background: #ffd23e; box-shadow: 0 0 0 3px rgba(255, 210, 62, 0.14); } .wl-zone-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 12px; font-weight: 800; color: var(--text-3); } #wlWaitingWrap { margin-top: 20px; } .wl-live-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px 20px; font-size: 13px; color: var(--text-2); margin-bottom: 4px; } .wl-waiting-list { display: flex; flex-direction: column; gap: 6px; } .wl-waiting-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .wl-waiting-row:hover { border-color: var(--text-3); } .wl-waiting-row .avatar { width: 30px; height: 30px; font-size: var(--fs-meta); filter: grayscale(1); opacity: .7; } .wl-waiting-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; } .wl-waiting-main a { font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; } .wl-waiting-main a:hover { text-decoration: underline; } .wl-waiting-meta { color: var(--text-3); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 640px) { .wl-waiting-main { flex-direction: column; gap: 1px; } .wl-waiting-row .btn-table { display: none; } } /* ---------- streaming cadence ---------- */ .cad-heatmap-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .cad-hm-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-3); } .cad-hm-grid { display: grid; grid-template-columns: 76px repeat(7, 1fr); gap: 5px; padding: 14px 16px 16px; } .cad-hm-collabel, .cad-hm-rowlabel { font-size: 12px; font-weight: 800; color: var(--text-3); display: flex; align-items: center; } .cad-hm-collabel { justify-content: center; padding-bottom: 2px; } .cad-hm-rowlabel { justify-content: flex-end; padding-right: 8px; white-space: nowrap; } .cad-hm-cell { height: 30px; border-radius: 7px; background: color-mix(in srgb, var(--accent) calc(var(--hm) * 88%), var(--surface-2)); display: grid; place-items: center; font-size: 12px; transition: transform .12s ease; } .cad-hm-cell:hover { transform: scale(1.12); } .cad-hm-zero { background: var(--surface-2); opacity: .55; } .cad-hm-peak { box-shadow: 0 0 0 1.5px var(--accent), 0 0 12px 1px var(--accent-soft); } .cad-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .cad-card { cursor: pointer; gap: 10px; } .cad-card-name { font-weight: 700; font-size: 14.5px; } .cad-rhythm { font-size: 12.5px; color: var(--text-2); } .cad-rhythm b { color: var(--text); font-weight: 700; } .cad-strip { display: flex; gap: 6px; align-items: flex-end; padding: 2px 2px 0; } .cad-strip-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; } .cad-strip-col span { font-size: var(--fs-meta); font-weight: 800; color: var(--text-3); } .cad-strip-bar { width: 100%; max-width: 18px; border-radius: 3px 3px 1px 1px; background: var(--surface-3); } .cad-strip-bar.has-data { background: var(--data); } @media (max-width: 640px) { .cad-hm-grid { grid-template-columns: 58px repeat(7, 1fr); gap: 3px; padding: 10px; } .cad-hm-rowlabel { font-size: 8.5px; } .cad-hm-cell { height: 24px; border-radius: var(--radius-sm); font-size: var(--fs-micro); } } /* ---------- leaderboard ---------- */ .lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } .lb-podium-card { position: relative; text-align: center; padding: 22px 16px 16px; cursor: pointer; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); } .lb-podium-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .lb-rank-1 { border-color: color-mix(in srgb, #f5c542 55%, var(--border)); } .lb-rank-1::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius); background: radial-gradient(240px circle at 50% 0%, rgba(245, 197, 66, 0.12), transparent 70%); } .lb-rank-2 { border-color: color-mix(in srgb, #c0c8d4 45%, var(--border)); } .lb-rank-3 { border-color: color-mix(in srgb, #cd8a4f 45%, var(--border)); } .lb-medal { font-size: 22px; margin-bottom: 8px; } .lb-podium-avatar { width: 52px; height: 52px; margin: 0 auto 10px; font-size: 17px; } .lb-podium-name { font-weight: 800; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; } .lb-podium-value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .lb-rank-1 .lb-podium-value { color: #f5c542; } .lb-podium-label { font-size: 12px; font-weight: 800; color: var(--text-3); margin: 4px 0 10px; } .lb-podium-meta { font-size: var(--fs-meta); color: var(--text-2); } .lb-podium-card .lb-delta { position: absolute; top: 12px; right: 12px; } .lb-list { display: flex; flex-direction: column; gap: 6px; } .lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .lb-row:hover { border-color: var(--text-3); transform: translateY(-1px); } .lb-rank { flex: 0 0 26px; text-align: center; font-weight: 800; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; } .lb-row .avatar { width: 34px; height: 34px; font-size: 12px; } .lb-row-main { flex: 1; min-width: 0; } .lb-row-top { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 5px; min-width: 0; } .lb-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-row-meta { color: var(--text-3); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-bar-track { height: 5px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .lb-bar-fill { height: 100%; background: var(--data); border-radius: 999px; } .lb-value { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; flex-shrink: 0; } .lb-value-unit { font-size: 12px; font-weight: 800; color: var(--text-3); margin-left: 3px; } .lb-delta { font-size: var(--fs-meta); font-weight: 800; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .lb-delta-up { color: var(--good); background: var(--good-soft); } .lb-delta-down { color: var(--accent); background: var(--accent-soft); } .lb-delta-same { color: var(--text-3); background: var(--surface-2); } .lb-delta-new { color: var(--warn); background: var(--warn-soft); } @media (max-width: 700px) { .lb-podium { grid-template-columns: 1fr; gap: 8px; } .lb-podium-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; } .lb-medal { margin: 0; font-size: 18px; } .lb-podium-avatar { width: 38px; height: 38px; margin: 0; } .lb-podium-name { margin: 0; flex: 1; min-width: 0; justify-content: flex-start; } .lb-podium-value { font-size: 20px; } .lb-podium-label, .lb-podium-meta { display: none; } .lb-row-meta { display: none; } } /* ---------- requested designs ---------- */ .flag-requests-panel { margin-bottom: 16px; } .flag-requests-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; max-height: 40vh; overflow-y: auto; } .flag-request-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 12.5px; } .flag-request-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .flag-request-subject { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flag-request-meta { color: var(--text-3); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flag-request-row .approve-flag-btn:hover { color: var(--good); border-color: var(--good); background: var(--good-soft); } .designs-list { display: flex; flex-direction: column; gap: 6px; } .design-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .design-row:hover { border-color: var(--text-3); } .design-row-main { display: grid; grid-template-columns: 32px 1fr auto auto auto auto; align-items: center; gap: 14px; padding: 11px 16px; } /* insight strip */ .rd-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; } .rd-insight-card { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .rd-insight-card .hc-value { font-size: 24px; } .rd-insight-alert { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .rd-insight-alert .hc-value { color: var(--accent); } /* per-row stock verdict chip */ .rd-stock { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .rd-stock-ok { color: var(--good); background: var(--good-soft); } .rd-stock-gap { color: var(--accent); background: var(--accent-soft); } .rd-stock-unmatched { color: var(--text-3); background: var(--surface-2); } /* expanded panel: chat evidence + matching catalog designs side by side */ .rd-expand-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; } .rd-matches-label { font-size: 12px; font-weight: 800; color: var(--text-3); margin-bottom: 7px; } .rd-matches-strip { display: flex; gap: 8px; flex-wrap: wrap; } .rd-match { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--fs-meta); font-weight: 700; color: var(--text-2); } .rd-match img { width: 44px; height: 62px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); } .rd-match .rd-qty-ok { color: var(--good); } .rd-match .rd-qty-zero { color: var(--text-3); } @media (max-width: 640px) { .rd-insights { grid-template-columns: 1fr; gap: 8px; } .rd-expand-grid { grid-template-columns: 1fr; } } .design-rank { font-size: 12px; font-weight: 800; color: var(--text-3); font-variant-numeric: tabular-nums; } .design-info { min-width: 0; } .design-name { font-size: 13.5px; font-weight: 700; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .design-bar-track { height: 5px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .design-bar-fill { height: 100%; background: var(--data); border-radius: 999px; } .design-count { font-size: 18px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; } .design-meta { font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; display: flex; gap: 5px; align-items: center; } .flag-btn { border: none; background: transparent; color: var(--text-3); font-size: 14px; width: 26px; height: 26px; border-radius: 999px; cursor: pointer; opacity: 0.45; display: grid; place-items: center; } .flag-btn:hover { opacity: 1; background: var(--warn-soft); } .design-examples { border-top: 1px solid var(--border); padding: 10px 16px 12px 62px; display: flex; flex-direction: column; gap: 6px; animation: riseIn .15s ease; } .design-examples[hidden] { display: none; } .design-example-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; } .design-example-text { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .design-example-meta { color: var(--text-3); flex-shrink: 0; } .flag-panel { border-top: 1px solid var(--border); padding: 12px 16px 14px 62px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); animation: riseIn .15s ease; } .flag-panel[hidden] { display: none; } .flag-panel-title { font-size: var(--fs-panel); font-weight: 700; } .flag-reason-chips { display: flex; flex-wrap: wrap; gap: 6px; } .flag-reason-chip.active { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .flag-note-input { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12.5px; outline: none; max-width: 360px; } .flag-note-input:focus { border-color: var(--accent); } .flag-panel-actions { display: flex; gap: 8px; } .flag-panel-actions .btn-secondary { flex: none; padding: 7px 16px; } .flag-submit-btn:disabled { opacity: 0.4; cursor: default; } .flag-submit-btn:not(:disabled) { background: var(--warn-soft); color: var(--warn); } @media (max-width: 640px) { .design-row-main { grid-template-columns: 24px 1fr auto auto auto; } .design-meta { display: none; } } /* ---------- logs ---------- */ .user-picker { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 14px; scrollbar-width: none; } .user-picker::-webkit-scrollbar { display: none; } .user-chip { display: flex; align-items: center; gap: 8px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); padding: 5px 14px 5px 5px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; } .user-chip .avatar { width: 26px; height: 26px; font-size: var(--fs-meta); } .user-chip:hover { border-color: var(--text-3); color: var(--text); } .user-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .logs-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; } .logs-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .logs-pane-sessions { display: flex; flex-direction: column; max-height: 70vh; } .logs-pane-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-3); flex-shrink: 0; } .logs-pane-count { font-variant-numeric: tabular-nums; } .session-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .session-row { background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; font-size: 12.5px; } .session-row:hover { border-color: var(--text-3); } .session-row.active { border-color: var(--accent); background: var(--accent-soft); } .session-row .date-line { font-weight: 700; font-size: 13px; margin-bottom: 3px; display: flex; justify-content: space-between; gap: 8px; } .session-row .meta-line { color: var(--text-2); } .status-pill { font-size: var(--fs-meta); font-weight: 700; padding: 1px 7px; border-radius: 999px; flex-shrink: 0; } .status-pill.live { background: var(--accent-soft); color: var(--accent); } .status-pill.ended { background: var(--surface-3); color: var(--text-3); } .transcript-pane { height: 70vh; display: flex; flex-direction: column; } .transcript-empty { margin: auto; color: var(--text-3); font-size: 13px; padding: 40px; text-align: center; } .transcript-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 700; flex-shrink: 0; } .transcript-back { display: none; flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; font-size: 15px; align-items: center; justify-content: center; } .transcript-back:hover { color: var(--text); } .transcript-filename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transcript-head a { font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; flex-shrink: 0; border: 1px solid var(--accent); padding: 5px 11px; border-radius: 999px; } .transcript-audio { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); } .transcript-audio audio { flex: 1; min-width: 0; height: 32px; } .transcript-audio a { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; } .transcript-audio a:hover { color: var(--text); border-color: var(--text-3); } .transcript-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .transcript-search { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: 999px; font-size: 12.5px; outline: none; } .transcript-search:focus { border-color: var(--accent); } .flagged-toggle { flex-shrink: 0; } .transcript-match-count { font-size: var(--fs-meta); color: var(--text-3); flex-shrink: 0; white-space: nowrap; } .transcript-body { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: 13px; } .log-line { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); } .log-line:hover { background: var(--surface-2); } .log-line.flagged { background: var(--warn-soft); box-shadow: inset 2px 0 0 var(--warn); } .log-line.flagged:hover { filter: brightness(1.08); } .log-line[hidden] { display: none; } .log-flag-icon { flex: 0 0 12px; font-size: var(--fs-meta); line-height: 1.9; color: var(--warn); text-align: center; visibility: hidden; } .log-line.flagged .log-flag-icon { visibility: visible; } .log-time { flex: 0 0 68px; color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; line-height: 1.9; } .log-user { flex: 0 0 140px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 12.5px; color: var(--text-2); line-height: 1.9; } .log-line.flagged .log-user { color: var(--warn); } .log-text { flex: 1 1 auto; min-width: 0; color: var(--text); line-height: 1.55; word-break: break-word; white-space: pre-wrap; } .log-fallback { flex: 1 1 auto; min-width: 0; color: var(--text-2); line-height: 1.55; word-break: break-word; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } mark { background: var(--warn-soft); color: var(--warn); border-radius: 2px; padding: 0 1px; } @media (max-width: 640px) { .log-line { flex-wrap: wrap; row-gap: 2px; } .log-user { flex: 0 1 auto; max-width: 60%; } .log-text, .log-fallback { flex-basis: 100%; margin-left: 20px; } } @media (max-width: 760px) { .logs-layout { grid-template-columns: 1fr; } .logs-pane-sessions, .logs-pane-transcript { display: none; } .logs-layout[data-mobile-view="sessions"] .logs-pane-sessions { display: flex; } .logs-layout[data-mobile-view="transcript"] .logs-pane-transcript { display: block; } .transcript-back { display: inline-flex; } } /* ---------- pocketwatch modal ---------- */ .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; animation: fadeIn .15s ease; } .overlay[hidden] { display: none; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 640px; width: 100%; min-width: 0; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: var(--shadow); padding: 26px; animation: scaleIn .18s cubic-bezier(.16, 1, .3, 1); } .modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; font-size: 13px; } .modal-close:hover { color: var(--text); } .pw-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .pw-head .avatar { width: 46px; height: 46px; font-size: 16px; } .pw-head h3 { margin: 0; font-size: var(--fs-card); } .pw-head .status-line { margin-top: 3px; } .pw-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; } .pw-stat-box { background: var(--surface-2); border-radius: var(--radius-sm); padding: 11px 13px; min-width: 0; } .pw-stat-box .label { font-size: 12px; color: var(--text-3); font-weight: 700; margin-bottom: 4px; } .pw-stat-box .value { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: break-word; } .pw-stat-box .sub { font-size: var(--fs-meta); color: var(--text-2); margin-top: 1px; } .auctions-title { font-size: var(--fs-panel); font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; } .auction-empty { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; } .auction-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 8px; } .auction-row .top-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .auction-row .item-name { font-weight: 700; font-size: 13px; } .auction-row .price { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } .auction-row .meta-line { font-size: var(--fs-meta); color: var(--text-2); margin-top: 4px; } .activity-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .activity-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; } .activity-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-meta { color: var(--text-3); font-size: var(--fs-meta); white-space: nowrap; flex-shrink: 0; } .pw-footnote { font-size: var(--fs-meta); color: var(--text-3); margin-top: 14px; line-height: 1.5; } .modal-wide { max-width: 820px; } .bd-chart { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding: 0 4px 0; margin: 4px 0 22px; } .bd-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; } .bd-bar { width: 100%; max-width: 34px; background: var(--surface-3); border-radius: 5px 5px 2px 2px; } .bd-bar.has-data { background: var(--data); } .bd-bar-label { font-size: 12px; color: var(--text-3); font-weight: 700; } .bd-table-wrap { border: 1px solid var(--border); } .bd-table-wrap table { min-width: 0; font-size: 12.5px; } .bd-table-wrap th, .bd-table-wrap td { padding: 10px 12px; } .btn-table { flex: none; padding: 6px 12px; font-size: var(--fs-meta); } /* ---------- mobile ---------- */ @media (max-width: 640px) { .container { padding: 66px 14px 60px; } .overlay { padding: 10px; } .modal { padding: 18px; border-radius: var(--radius); } .modal-close { top: 12px; right: 12px; } .transcript-pane { height: auto; min-height: 60vh; } .logs-pane-sessions { max-height: none; } .transcript-search { min-width: 0; } .design-examples, .flag-panel { padding-left: 16px; } .flag-note-input { max-width: 100%; } .remove-btn { width: 30px; height: 30px; font-size: 14px; } .flag-btn { width: 32px; height: 32px; font-size: 15px; } } @media (max-width: 480px) { .pw-stat-grid { grid-template-columns: 1fr; } } /* ---------- account menu (topbar) ---------- */ .account-name { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; min-width: 0; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: transparent; border: none; cursor: pointer; padding: 4px 2px; border-radius: var(--radius-sm); } .account-name > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-name:hover { color: var(--text); } /* ---------- settings modal (account / team / invites / roles) ---------- */ .modal-settings { padding: 0; max-width: 860px; } .modal-settings .modal-close { top: 14px; right: 14px; } /* sized to the pane: short panes stay short, long ones cap at the viewport and scroll inside; the min keeps the nav whole */ .settings-layout { display: grid; grid-template-columns: 172px 1fr; grid-template-rows: minmax(0, 1fr); height: auto; min-height: 520px; max-height: min(680px, 82vh); } .settings-nav { display: flex; flex-direction: column; gap: 2px; padding: 44px 10px 16px; border-right: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; } .settings-nav-btn { text-align: left; border: none; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; } .settings-nav-btn:hover { color: var(--text); background: var(--surface-3); } .settings-nav-btn.active { color: var(--bg); background: var(--text); } .settings-content { padding: 30px 26px 26px; overflow-y: auto; min-width: 0; min-height: 0; } .settings-pane { display: none; } .settings-pane.active { display: block; animation: fadeIn .15s ease; } .settings-account-summary .avatar { width: 44px; height: 44px; font-size: 15px; } .settings-account-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; } @media (max-width: 640px) { .settings-layout { grid-template-columns: 1fr; height: auto; max-height: 90vh; } .settings-nav { flex-direction: row; overflow-x: auto; padding: 30px 12px 10px; border-right: none; border-bottom: 1px solid var(--border); } .settings-nav-label, .settings-nav-spacer { display: none; } .settings-nav-btn { white-space: nowrap; flex-shrink: 0; } .settings-content { padding: 20px; } } .invite-meta, .user-meta { color: var(--text-3); font-size: var(--fs-meta); } .invite-status.used { background: var(--surface-3); color: var(--text-3); } .user-row .avatar { width: 30px; height: 30px; font-size: var(--fs-meta); } .role-badge { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); } .role-badge.is-admin { background: var(--accent-soft); color: var(--accent); } .icon-btn-sm { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); cursor: pointer; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; } .td-actions { text-align: right; white-space: nowrap; width: 1%; } .row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; vertical-align: middle; } .row-actions .icon-btn-sm { display: inline-grid; } .icon-btn-sm:hover { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); } .icon-btn-sm:disabled { opacity: .3; cursor: default; } .icon-btn-sm:disabled:hover { color: var(--text-3); border-color: var(--border); background: var(--surface); } @media (max-width: 640px) { } .role-perm-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; cursor: pointer; } .role-perm-item input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; } .role-perm-item span.perm-label { display: block; font-weight: 600; color: var(--text); } .role-perm-item span.perm-desc { display: block; color: var(--text-3); font-size: var(--fs-meta); margin-top: 1px; } .role-perm-item:has(input:disabled) { cursor: default; opacity: .7; } .role-new-form-actions .btn-secondary { flex: none; padding: 7px 16px; } /* ---------- discord (account pane) ---------- */ .discord-section { margin-bottom: 22px; } .discord-not-configured { font-size: 12.5px; color: var(--text-3); } .discord-pitch { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin: 0 0 12px; } .discord-connect-btn { display: inline-flex; align-items: center; gap: 8px; background: #5865f2; color: #fff; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: var(--radius-sm); text-decoration: none; border: none; cursor: pointer; } .discord-connect-btn:hover { filter: brightness(1.08); } .discord-connected-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 13px; } .discord-connected-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex-shrink: 0; } .discord-connected-tag { font-weight: 700; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- console & activity (inside settings) ---------- */ .console-logs-body { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; height: 52vh; overflow-y: auto; margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-meta); line-height: 1.7; } .console-log-line { display: flex; gap: 8px; white-space: pre-wrap; word-break: break-word; color: var(--text-2); } .console-log-time { color: var(--text-3); flex-shrink: 0; } .console-log-line.level-error { color: var(--bad); } .console-log-line.level-warn { color: var(--warn); } .activity-list { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; max-height: 52vh; overflow-y: auto; } .activity-row { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 12.5px; } .activity-row.action-login_failed { background: var(--warn-soft); } .activity-row.action-login_failed .activity-actor, .activity-row.action-login_failed .activity-summary { color: var(--warn); } /* ---------- permission-gated UI ---------- */ body:not(.perm-watchlist-manage) .add-form, body:not(.perm-watchlist-manage) .remove-btn { display: none; } body:not(.perm-logs-view) .nav-item[data-tab="logs"] { display: none; } body:not(.perm-designs-flag) .flag-btn { display: none; } body:not(.perm-designs-approve) #aiReviewControls { display: none; } /* ---------- permission-gated UI: employee hub ---------- */ body:not(.perm-sops-view) .nav-item[data-tab="sops"] { display: none; } body:not(.perm-payroll-view):not(.perm-payrequests-submit):not(.perm-payrequests-manage) .nav-item[data-tab="pay"] { display: none; } body:not(.perm-inventory-view) .nav-item[data-tab="inventory"] { display: none; } body:not(.perm-finances-view) .nav-item[data-tab="finances"] { display: none; } body:not(.perm-sops-manage) #newSopBtn, body:not(.perm-sops-manage) .sop-edit-btn { display: none; } body:not(.perm-payroll-manage) #newRateBtn, body:not(.perm-payroll-manage) .rate-edit-btn, body:not(.perm-payroll-manage) .rate-delete-btn { display: none; } body:not(.perm-payroll-log) #logHoursForm { display: none; } body:not(.perm-finances-manage) #financesEditBtn { display: none; } /* Per-transaction ledger detail is stricter than the finances.view snapshot everyone sees — hidden entirely (chips, sub-views, export buttons) unless finances.ledger is granted. */ body:not(.perm-finances-ledger) #financesTabChips [data-fin-tab="ledger"], body:not(.perm-finances-ledger) #financesTabChips [data-fin-tab="reports"], body:not(.perm-finances-ledger) #finances-ledger, body:not(.perm-finances-ledger) #finances-reports { display: none; } body:not(.perm-finances-manage) #addLedgerForm, body:not(.perm-finances-manage) .ledger-edit-btn, body:not(.perm-finances-manage) .ledger-delete-btn { display: none; } /* ---------- auth pages (login / register) ---------- */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; } .auth-page::before { content: ''; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(560px circle at 18% 20%, var(--accent-soft), transparent 60%), radial-gradient(480px circle at 85% 80%, var(--good-soft), transparent 55%); pointer-events: none; } .auth-shell { display: grid; grid-template-columns: 1fr 1fr; max-width: 880px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; } .auth-visual { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; gap: 18px; background: linear-gradient(160deg, var(--surface-2), var(--surface)); border-right: 1px solid var(--border); } .auth-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; } .auth-visual h1 { font-size: 26px; line-height: 1.25; margin: 6px 0 0; letter-spacing: -0.01em; } .auth-visual-sub { color: var(--text-2); font-size: 13.5px; line-height: 1.6; margin: 0; } .auth-feature-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .auth-feature-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); } .auth-feature-icon { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .auth-card { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .auth-card-head h2 { margin: 0 0 4px; font-size: var(--fs-page); } .auth-card-head .muted { margin-bottom: 22px; } .auth-error { background: var(--bad-soft); color: var(--bad); border: 1px solid rgba(255, 107, 127, 0.3); padding: 10px 13px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 16px; line-height: 1.5; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); } .auth-field input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13.5px; outline: none; font-weight: 400; } .auth-field input:focus { border-color: var(--accent); } .auth-hint { font-size: var(--fs-meta); color: var(--text-3); font-weight: 400; } .auth-password-wrap { position: relative; display: flex; } .auth-password-wrap input { flex: 1; padding-right: 40px; } .auth-password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 999px; border: none; background: transparent; color: var(--text-3); cursor: pointer; font-size: 14px; } .auth-password-toggle:hover { color: var(--text); background: var(--surface-3); } .auth-submit { background: var(--accent-solid); color: #fff; border: none; font-weight: 700; font-size: 13.5px; padding: 11px; border-radius: var(--radius-sm); cursor: pointer; margin-top: 4px; } .auth-submit:hover { filter: brightness(1.08); } .auth-submit:disabled { opacity: .55; cursor: default; } .auth-switch { text-align: center; font-size: 12.5px; color: var(--text-2); margin: 22px 0 0; } .auth-switch a { color: var(--accent); font-weight: 700; text-decoration: none; } .auth-switch a:hover { text-decoration: underline; } /* Sign-in page motion: the shell rises in once, the card's parts follow in order; on success the shell lifts away. */ .auth-shell { animation: authIn .6s cubic-bezier(.2, .8, .2, 1) both; } @keyframes authIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .auth-card > * { animation: tfFadeUp .5s cubic-bezier(.2, .8, .2, 1) both; } .auth-card > :nth-child(1) { animation-delay: .18s; } .auth-card > :nth-child(2) { animation-delay: .26s; } .auth-card > :nth-child(3) { animation-delay: .34s; } .auth-card > :nth-child(4) { animation-delay: .42s; } .auth-feature-list li { animation: tfFadeUp .5s ease both; } .auth-feature-list li:nth-child(1) { animation-delay: .3s; } .auth-feature-list li:nth-child(2) { animation-delay: .4s; } .auth-feature-list li:nth-child(3) { animation-delay: .5s; } .auth-shell.is-leaving { animation: authOut .4s ease forwards; pointer-events: none; } @keyframes authOut { to { opacity: 0; transform: translateY(-10px) scale(.985); } } .auth-finale .tf-ch { animation-delay: calc(.08s + var(--i) * 26ms); } .auth-finale .tf-rule { animation-delay: .7s; } .auth-finale.is-out { animation-duration: .38s; } @media (prefers-reduced-motion: reduce) { .auth-shell, .auth-card > *, .auth-feature-list li, .auth-shell.is-leaving { animation: none; } } @media (max-width: 760px) { .auth-visual { display: none; } .auth-shell { grid-template-columns: 1fr; max-width: 420px; } .auth-card { padding: 32px 24px; } } @media (max-width: 420px) { .auth-page { padding: 16px; } .auth-card { padding: 26px 20px; } } /* ---------- employee hub: nav divider ---------- */ /* ---------- employee hub: shared ---------- */ .subview-title { margin: 0; font-size: var(--fs-panel); font-weight: 700; } .finances-subview { display: none; } .finances-subview.active { display: block; animation: fadeIn .2s ease; } #view-finances { max-width: 1240px; } #view-finances .pq-sub-chips { margin-bottom: 14px; } .status-pill.pending { background: var(--warn-soft); color: var(--warn); } .status-pill.approved { background: var(--accent-soft); color: var(--accent); } .status-pill.paid { background: var(--good-soft); color: var(--good); } .status-pill.denied { background: var(--surface-3); color: var(--text-3); } .status-pill.income { background: var(--good-soft); color: var(--good); } .status-pill.expense { background: var(--warn-soft); color: var(--warn); } .status-pill.capital { background: var(--accent-soft); color: var(--accent); } .status-pill.draw { background: var(--surface-3); color: var(--text-3); } .sop-category-tag { font-size: 12px; font-weight: 700; color: var(--text-3); } .sop-card-body { font-size: 12.5px; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; max-height: 90px; overflow: hidden; } .sop-card-empty { color: var(--text-3); font-style: italic; } .sop-meta { font-size: var(--fs-meta); color: var(--text-3); } .inventory-search { flex: 1; min-width: 200px; max-width: 320px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 9px 13px; border-radius: var(--radius-sm); font-size: 13.5px; outline: none; } .inventory-search:focus { border-color: var(--accent); } #inventoryCategoryChips { margin-bottom: 14px; } .poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .poster-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease; } .poster-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 10px 28px rgba(0,0,0,.35)); border-color: var(--border-strong, var(--accent)); } .poster-card.zero-stock { opacity: .74; } .poster-card.zero-stock:hover { opacity: 1; } .poster-card.in-stock { border-color: color-mix(in srgb, var(--good-strong) 30%, var(--border)); } .poster-thumb-wrap { position: relative; overflow: hidden; } .poster-thumb { width: 100%; aspect-ratio: 178 / 252; object-fit: cover; background: var(--surface-2); display: block; cursor: pointer; transition: transform .2s ease; } .poster-card:hover .poster-thumb { transform: scale(1.04); } .poster-stock-pill { position: absolute; bottom: 6px; left: 6px; font-size: var(--fs-meta); font-weight: 800; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; pointer-events: none; backdrop-filter: blur(3px); } .poster-stock-pill.in { background: rgba(47,191,113,.9); color: #06210f; } .poster-stock-pill.out { background: rgba(0,0,0,.6); color: #fff; } .poster-thumb-empty .poster-stock-pill { position: static; margin-top: 6px; } .poster-thumb-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; color: var(--text-3); font-size: var(--fs-meta); font-weight: 700; word-break: break-word; cursor: default; } .poster-image-count { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: 3px; background: rgba(0,0,0,.65); color: #fff; font-size: var(--fs-meta); font-weight: 700; padding: 2px 7px; border-radius: 999px; pointer-events: none; backdrop-filter: blur(2px); } .poster-card-foot { display: flex; align-items: center; gap: 6px; padding: 9px 10px; } .poster-qty-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .poster-code { font-size: 12px; font-weight: 800; letter-spacing: .02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .poster-qty-input { width: 52px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 5px 6px; border-radius: var(--radius-sm); font-size: 12.5px; text-align: center; outline: none; flex-shrink: 0; } .poster-qty-input:focus { border-color: var(--accent); } .poster-qty-input:disabled { opacity: .5; } /* camera scanner — live viewfinder */ .modal-scan { max-width: 520px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); } /* the viewport yields height so hint + strip ALWAYS fit on screen — a match strip below the fold mid-scan is unusable */ .scan-viewport { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; background: #000; max-height: calc(100vh - 330px); max-height: calc(100dvh - 330px); } #scanVideo { width: 100%; height: 100%; object-fit: cover; display: block; } .scan-guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 82%; aspect-ratio: 178 / 252; pointer-events: none; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45); border-radius: var(--radius); } .scan-guide span { position: absolute; width: 26px; height: 26px; border: 3px solid var(--accent); } .scan-guide span:nth-child(1) { top: -2px; left: -2px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; } .scan-guide span:nth-child(2) { top: -2px; right: -2px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; } .scan-guide span:nth-child(3) { bottom: -2px; left: -2px; border-right: none; border-top: none; border-radius: 0 0 0 8px; } .scan-guide span:nth-child(4) { bottom: -2px; right: -2px; border-left: none; border-top: none; border-radius: 0 0 8px 0; } .scan-guide.landscape { height: 46%; aspect-ratio: 252 / 178; } .scan-hint-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; } .scan-hint { margin: 0; flex: 1; text-align: left; } .scan-quad { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .scan-cat-select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 700; padding: 6px 8px; border-radius: var(--radius); outline: none; max-width: 130px; flex-shrink: 0; } .scan-cat-select:focus { border-color: var(--accent); } .rd-tags { display: flex; flex-wrap: wrap; gap: 5px; } .rd-tag { font-size: var(--fs-meta); font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); } .rd-tag-cat { background: var(--accent-soft); color: var(--accent); border-color: transparent; text-transform: capitalize; } .scan-live-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; min-height: 118px; scrollbar-width: none; } .scan-live-strip::-webkit-scrollbar { display: none; } .scan-live-strip .scan-match { flex: 0 0 84px; } /* camera scanner */ .scan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .scan-match { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-meta); font-weight: 700; color: var(--text-2); background: var(--surface-2); } .scan-conf { position: absolute; top: 11px; right: 11px; font-style: normal; font-size: var(--fs-meta); font-weight: 800; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: var(--text-3); pointer-events: none; backdrop-filter: blur(2px); } .scan-conf.high { color: var(--good); } .scan-conf.mid { color: var(--warn); } .scan-match:hover { border-color: var(--accent); transform: translateY(-1px); } .scan-match img { width: 100%; aspect-ratio: 178 / 252; object-fit: cover; border-radius: var(--radius-sm); } .scan-match b { color: var(--text-3); font-size: var(--fs-meta); font-weight: 700; } .scan-confirm { display: flex; gap: 16px; align-items: flex-start; } .scan-confirm img { width: 110px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .scan-confirm-form { display: flex; flex-direction: column; gap: 10px; flex: 1; } .scan-confirm-form input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 16px; font-weight: 700; width: 110px; text-align: center; } body:not(.perm-inventory-log) #scanPosterBtn { display: none; } .load-more-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 20px 0; } .load-more-wrap[hidden] { display: none; } .load-more-wrap .btn-secondary { flex: none; padding: 9px 22px; } .poster-gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; } .poster-gallery-grid img { max-width: 260px; max-height: 60vh; width: auto; height: auto; border-radius: var(--radius-sm); flex: 1 1 auto; object-fit: contain; background: var(--surface-2); } /* team scan photos inside the gallery popup */ .scan-shot { position: relative; margin: 0; display: flex; flex-direction: column; gap: 4px; } .scan-shot img { flex: 0 0 auto; } .scan-shot figcaption { font-size: var(--fs-meta); font-weight: 700; color: var(--text-3); } .scan-shot-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: var(--fs-meta); line-height: 1; cursor: pointer; backdrop-filter: blur(2px); } .scan-shot-del:hover { background: var(--accent); } body:not(.perm-inventory-log) .scan-shot-del { display: none; } @media (max-width: 640px) { .poster-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } .poster-gallery-grid img { max-width: 100%; } } .sop-editor-form, .rate-editor-form, .finances-editor-form { display: flex; flex-direction: column; gap: 12px; } .sop-editor-form label, .rate-editor-form label, .finances-editor-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); } .sop-editor-form input, .sop-editor-form select, .sop-editor-form textarea, .rate-editor-form input, .rate-editor-form select, .finances-editor-form input, .finances-editor-form textarea { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; outline: none; width: 100%; font-weight: 400; } .sop-editor-form textarea, .finances-editor-form textarea { resize: vertical; min-height: 140px; font-family: inherit; line-height: 1.5; } .editor-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } .editor-actions .btn-secondary { flex: none; padding: 8px 18px; } .editor-save-btn { background: var(--accent); color: #fff; } .editor-save-btn:hover { filter: brightness(1.08); } .cost-row-form { display: flex; gap: 8px; align-items: center; } .cost-row-form input { flex: 1; } .cost-row-form input[name="amount"], .cost-row-form input[name="dueDate"] { flex: 0 0 130px; } @media (max-width: 640px) { .cost-row-form { flex-wrap: wrap; } .cost-row-form input[name="amount"], .cost-row-form input[name="dueDate"] { flex: 1 1 45%; } } .home-card { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; position: relative; overflow: hidden; } .home-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--text-3); } .home-card .hc-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--text-3); margin-bottom: 10px; } .home-card .hc-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .home-card .hc-sub { font-size: var(--fs-meta); color: var(--text-2); margin-top: 3px; } .home-card.hc-live::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(320px circle at 100% 0%, var(--accent-soft), transparent 65%); } .home-card.hc-live .hc-value { color: var(--accent); } .home-live-row .avatar { width: 32px; height: 32px; font-size: var(--fs-meta); } .home-live-row .hl-meta { color: var(--text-2); font-size: 12px; flex-shrink: 0; } /* ---------- toast ---------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); z-index: 60; animation: toastIn .2s cubic-bezier(.16, 1, .3, 1); } @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* scan-in tag editor */ .scan-tags-editor { margin-top: 8px; } .scan-tags-editor input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; outline: none; } .scan-tags-editor input:focus { border-color: var(--accent); } /* scanner tall/wide segmented mode control */ .scan-orient-seg { display: flex; flex-shrink: 0; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface-2); } .scan-orient-seg button { border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 12px; font-weight: 700; padding: 6px 12px; } .scan-orient-seg button.active { background: var(--accent); color: #fff; } /* scan confirm: all lenticular frames + look-alike alert + undo bar */ .scan-frames-hint { margin: 12px 0 6px; font-size: 12px; } .scan-confirm-frames { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .scan-confirm-frames img { height: 170px; width: auto; flex: 0 0 auto; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: zoom-in; background: var(--surface-2); } .scan-alt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-soft); } .scan-alt-label { font-size: var(--fs-meta); font-weight: 700; color: var(--warn); } .scan-alt { display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-meta); font-weight: 700; padding: 4px 8px 4px 4px; } .scan-alt img { width: 26px; height: 36px; object-fit: cover; border-radius: 4px; } .scan-alt:hover { border-color: var(--warn); } .scan-undo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--good-soft); border: 1px solid var(--good); font-size: 12px; font-weight: 700; color: var(--text-2); } .scan-undo-bar[hidden] { display: none; } /* live mode: the undo bar floats over the camera view instead of pushing the strip down — no layout shift right when someone's about to tap */ .scan-viewport .scan-undo-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; z-index: 3; background: rgba(10, 24, 18, 0.88); color: #e8f5ee; backdrop-filter: blur(3px); } /* scan in / scan out mode */ .scan-mode-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; } .scan-mode-seg { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface-2); } .scan-mode-seg button { border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 7px 14px; } .scan-mode-seg button[data-mode="in"].active { background: var(--good); color: #06281a; } .scan-mode-seg button[data-mode="out"].active { background: var(--accent); color: #fff; } .scan-mode-count { font-size: 12px; font-weight: 700; color: var(--text-3); } .scan-out-mode .scan-mode-count { color: var(--accent); } .scan-out-mode .scan-guide span { border-color: var(--warn); } .scan-mode-pill { font-size: var(--fs-meta); font-weight: 800; vertical-align: middle; letter-spacing: .5px; background: var(--accent); color: #fff; border-radius: 999px; padding: 2px 8px; margin-left: 8px; } .scan-undo-bar.sold { background: var(--warn-soft); border-color: var(--warn); } .scan-viewport .scan-undo-bar.sold { background: rgba(40, 28, 6, 0.88); color: #f5ecd8; } /* "not in catalog" hint + report */ .scan-new-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); border: 1px solid var(--warn); font-size: 12px; font-weight: 700; color: var(--text-2); } .scan-new-hint[hidden] { display: none; } .scan-new-hint button { flex-shrink: 0; } .scan-not-in-catalog { margin-top: 8px; } /* issues + changelog + inventory history */ body:not(.is-admin) .is-admin-only { display: none; } .issue-card.resolved { opacity: .6; } .issue-body { margin-top: 8px; font-size: 13px; color: var(--text-2); white-space: pre-wrap; } .cl-body { margin-top: 6px; font-size: 13px; color: var(--text-2); white-space: pre-wrap; } .inv-history-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; } .inv-history-list { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow-y: auto; } .inv-history-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 4px; font-size: 12.5px; border-bottom: 1px solid var(--border); } .inv-history-row:last-child { border-bottom: none; } .ih-icon { flex-shrink: 0; color: var(--text-2); display: inline-flex; } .ih-text { flex: 1; color: var(--text-2); min-width: 0; } .ih-time { flex-shrink: 0; color: var(--text-3); font-size: var(--fs-meta); } .hp-live { color: var(--accent); } .hp-busy { color: var(--warn); } .hp-open { color: var(--good); } .home-actions { display: flex; gap: 8px; flex-wrap: wrap; } .home-action { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; font-weight: 700; padding: 9px 14px; border-radius: 999px; transition: border-color .15s, transform .15s; } .home-action:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); } .home-action svg { width: 15px; height: 15px; flex-shrink: 0; } .home-live-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; } .home-live-strip::-webkit-scrollbar { display: none; } .home-live-card { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 14px; min-width: 230px; } .home-live-card:hover { transform: translateY(-1px); } .hlc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hlc-info b { font-size: 13px; } .hlc-elapsed { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 700; color: var(--accent); white-space: nowrap; } .home-hot-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .home-hot-row:last-child { border-bottom: none; } .hh-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--text-3); font-size: var(--fs-meta); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .home-hot-row:first-child .hh-rank, .home-hot-row:nth-child(2) .hh-rank { background: var(--accent-soft); color: var(--accent); } .hh-name { flex: 1; font-size: 13px; font-weight: 700; text-transform: capitalize; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hh-count { font-size: 13px; font-weight: 800; color: var(--text-2); } @media (max-width: 860px) { } /* whatnot watchlist */ .wn-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .wn-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .wn-row.wn-live { border-color: var(--accent); } .wn-name { font-weight: 800; font-size: 13.5px; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .wn-name:hover { color: var(--accent); } .wn-meta { flex: 1; font-size: 12.5px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wn-remove { border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 13px; flex-shrink: 0; } .wn-remove:hover { color: var(--accent); } body:not(.perm-watchlist-manage) .perm-watchlist-manage-only { display: none; } body:not(.perm-watchlist-manage) #wnAddForm { display: none; } /* watchlist platform switcher + whatnot zones */ .wl-switch { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin-bottom: 18px; } .wl-switch button { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; color: var(--text-2); font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; } .wl-switch button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .wl-switch-badge { background: var(--accent); color: #fff; font-size: var(--fs-meta); font-weight: 800; border-radius: 999px; padding: 1px 7px; } .wn-schedule { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .wn-sched-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .wn-sched-when { flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: var(--text); min-width: 128px; } .wn-sched-seller { flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; } .wn-sched-seller:hover { text-decoration: underline; } .wn-sched-title { flex: 1; font-size: var(--fs-panel); color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 560px) { .wn-sched-row { flex-wrap: wrap; gap: 4px 10px; } .wn-sched-when { min-width: 0; } .wn-sched-title { flex-basis: 100%; } } .inv-total::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); opacity: 0; transition: opacity .15s; } .inv-total.active { border-color: var(--accent); background: var(--surface-2); box-shadow: var(--shadow); } .inv-total.active::after { opacity: 1; } /* subcategory (franchise) chips */ .subcat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .subcat-row[hidden] { display: none; } .subcat-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 700; font-size: 12.5px; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: all .12s; } .subcat-chip:hover { border-color: var(--accent); color: var(--text); } .subcat-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } .subcat-count { font-size: var(--fs-meta); font-weight: 800; background: color-mix(in srgb, currentColor 16%, transparent); border-radius: 999px; padding: 0 6px; } .subcat-chip.active .subcat-count { background: rgba(255,255,255,.25); } /* learn tab */ .learn-stats { margin-left: auto; font-size: 13px; color: var(--text-2); } .learn-quiz { max-width: 520px; } .quiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; } .quiz-progress { font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 12px; letter-spacing: .04em; } .quiz-img-wrap { display: flex; justify-content: center; background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 14px; } .quiz-img { height: 300px; max-width: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.35); } .quiz-q { font-size: 18px; font-weight: 800; margin-bottom: 12px; } .quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .quiz-opt { padding: 13px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: border-color .12s, transform .08s; } .quiz-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); } .quiz-opt.right { border-color: var(--good-strong); background: var(--good-soft); } .quiz-opt.wrong { border-color: var(--bad-strong); background: var(--bad-soft); } .quiz-opt:disabled { cursor: default; } .quiz-reveal { margin-top: 14px; padding: 13px 15px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; } .quiz-pron { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--accent); font-weight: 700; } .quiz-fav { color: #d9a514; font-weight: 700; } .quiz-next { margin-top: 10px; } .quiz-done { text-align: center; padding: 40px 20px; } .quiz-done-score { font-size: 52px; font-weight: 900; line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .quiz-done-msg { color: var(--text-2); margin-bottom: 18px; font-size: 15px; } .learn-study { max-width: 700px; display: flex; flex-direction: column; gap: 10px; } .learn-fr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0; } .learn-fr summary { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; } .learn-fr summary::-webkit-details-marker { display: none; } .learn-fr-name { font-weight: 800; font-size: 16px; } .learn-fr-stock { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .learn-fr-premise { margin: 0; padding: 0 16px 12px; font-size: 13.5px; color: var(--text-2); } .learn-chars { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 14px; } .learn-char { display: grid; grid-template-columns: 130px 110px 1fr; gap: 10px; font-size: 13.5px; align-items: baseline; } .learn-char-name { font-weight: 700; } .learn-char-pron { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); } .learn-char-note { color: var(--text-2); } @media (max-width: 560px) { .learn-char { grid-template-columns: 1fr 1fr; } .learn-char-note { grid-column: 1 / -1; } .quiz-opts { grid-template-columns: 1fr; } .quiz-img { height: 230px; } } .learn-study[hidden], .learn-quiz[hidden] { display: none; } /* quiz hints */ .quiz-q-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .quiz-q-row .quiz-q { margin-bottom: 0; } .quiz-hint-btn { border: 1.5px dashed var(--border); background: none; color: var(--text-2); font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; } .quiz-hint-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); } .quiz-hint-btn:disabled { cursor: default; opacity: .65; } .quiz-hint { margin: 0 0 12px; padding: 10px 13px; background: var(--surface-2); border-left: 3px solid #d9a514; border-radius: var(--radius-sm); font-size: 13.5px; } .quiz-done-clean { font-size: 13px; color: var(--text-2); margin: -4px 0 6px; } /* live assist */ .assist-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .assist-channels { display: flex; flex-wrap: wrap; gap: 8px; } .assist-chan { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 10px 7px 13px; font-weight: 700; font-size: 13px; } .assist-chan-live { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .assist-chan-state { font-size: var(--fs-meta); font-weight: 700; letter-spacing: .02em; color: var(--text-2); } .assist-chan-live .assist-chan-state { color: var(--accent); } .assist-chan .wn-remove { width: 18px; height: 18px; line-height: 1; border: none; background: none; color: var(--text-3); border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; } .assist-chan .wn-remove:hover { background: var(--bad-soft); color: var(--bad-strong); } /* pulse: at-a-glance counters for the room */ .assist-pulse { display: flex; gap: 8px; flex-wrap: wrap; } .pulse-stat { display: inline-flex; align-items: baseline; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 11px; font-size: 12px; font-weight: 700; color: var(--text-2); } .pulse-stat b { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .pulse-stat.live b { color: var(--accent); } .pulse-stat.good b { color: var(--good-strong); } .pulse-stat.miss b { color: var(--bad-strong); } .assist-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; } /* Resting state: nothing live and no demo running. The two-column live layout collapses into a "waiting" card with the next scheduled stream, and a recap of the last one. */ .assist-chan-panel { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .assist-chan-panel[hidden] { display: none; } .assist-chan-panel .inline-status { margin: 0; } .assist-rest { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; } .assist-rest[hidden] { display: none; } .assist-resting .assist-layout, .assist-resting #assistPullHead, .assist-resting #assistPulse, .assist-resting .assist-switch { display: none; } .assist-wait { display: flex; gap: 14px; align-items: flex-start; } .assist-idle-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); margin-top: 6px; flex-shrink: 0; animation: assistIdle 2.4s ease-in-out infinite; } @keyframes assistIdle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .assist-idle-dot { animation: none; } } .assist-wait .hm2-title { margin-bottom: 6px; } .assist-wait-sub { margin: 0; font-size: var(--fs-body); color: var(--text-2); line-height: 1.5; max-width: 52ch; } .assist-next { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .assist-next-label { font-size: var(--fs-meta); font-weight: 700; color: var(--text-3); } .assist-next-title { font-size: var(--fs-panel); font-weight: 800; } .assist-next-when { font-size: var(--fs-body); color: var(--text-2); } .assist-next .hm2-event-roles { margin-top: 6px; } .assist-next a { color: var(--accent-text); font-weight: 700; text-decoration: none; } .assist-next a:hover { text-decoration: underline; } .assist-last-asks { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; } .assist-ask { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); } .assist-ask-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .assist-ask-n { font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; } .assist-ask-st { font-size: var(--fs-meta); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .assist-ask-st.have { background: var(--good-soft); color: var(--good); } .assist-ask-st.zero { background: var(--warn-soft); color: var(--warn); } .assist-ask-st.none { background: var(--bad-soft); color: var(--bad); } @media (max-width: 860px) { .assist-rest { grid-template-columns: 1fr; } } .assist-main { min-width: 0; } /* spotlight — the hero card for the person reading chat */ .spotlight { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); padding: 20px 22px; overflow: hidden; } .spotlight::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--border); } .spotlight.have::before { background: var(--good-strong); } .spotlight.zero::before { background: #d9a514; } .spotlight.none::before { background: var(--bad-strong); } .spot-eyebrow { font-size: 12px; font-weight: 800; color: var(--text-3); display: flex; align-items: center; gap: 8px; } .spot-subject { font-size: 30px; font-weight: 800; line-height: 1.14; letter-spacing: -.01em; margin: 9px 0 5px; overflow-wrap: anywhere; } .spot-subject::before { content: "“"; } .spot-subject::after { content: "”"; } .spot-who { font-size: 13px; font-weight: 600; color: var(--text-2); } .spot-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 15px; border-radius: 999px; font-weight: 800; font-size: 14px; } .spotlight.have .spot-status { background: color-mix(in srgb, var(--good-strong) 16%, transparent); color: #54d38a; } .spotlight.zero .spot-status { background: color-mix(in srgb, #d9a514 18%, transparent); color: #e6bf4a; } .spotlight.none .spot-status { background: color-mix(in srgb, var(--bad-strong) 16%, transparent); color: #f0787c; } .spot-matches { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; } .spot-match { width: 128px; } .spot-match-img { border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.42); } .spot-match-img img { width: 100%; aspect-ratio: 178/258; object-fit: cover; display: block; } .spot-match.out .spot-match-img { opacity: .4; } .spot-match-code { font-weight: 800; font-size: 15px; margin-top: 9px; } .spot-match-stock { font-size: 12px; font-weight: 700; } .spot-match-stock.in { color: #54d38a; } .spot-match-stock.out { color: var(--text-3); } .spot-none { font-size: 15px; color: var(--text-2); margin-top: 14px; line-height: 1.5; max-width: 46ch; } /* related-tag chips (spotlight + inventory popover): the series/characters a request maps to, so e.g. a "goku" ask visibly connects to dragon ball, dbz */ .assist-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .assist-tags-label { font-size: 12px; font-weight: 800; color: var(--text-3); margin-right: 2px; } .assist-tag { font-size: var(--fs-meta); font-weight: 700; color: var(--text-2); background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .assist-inv-pop .assist-tags { margin-top: 11px; gap: 5px; } .assist-inv-pop .assist-tag { font-size: var(--fs-meta); padding: 2px 8px; } /* pull list — the checkable work queue for whoever grabs stock */ .assist-pull-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 2px 10px; } .assist-pull-head[hidden] { display: none; } .assist-pull-title { font-weight: 800; font-size: var(--fs-panel); } .assist-pull-hint { font-size: var(--fs-meta); color: var(--text-3); } .assist-queue { display: flex; flex-direction: column; gap: 8px; } .pull-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius); padding: 9px 14px 9px 11px; cursor: pointer; color: var(--text); transition: background .12s, opacity .15s; } .pull-row.have { border-left-color: var(--good-strong); } .pull-row.zero { border-left-color: #d9a514; } .pull-row.none { border-left-color: var(--bad-strong); } .pull-row:hover { background: var(--surface-2); } .pull-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: grid; place-items: center; color: transparent; transition: background .12s, border-color .12s, color .12s; } .pull-row:hover .pull-check { border-color: var(--text-3); } .pull-row.done { opacity: .5; } .pull-row.done .pull-check { background: var(--good-strong); border-color: var(--good-strong); color: #06210f; } .pull-row.done .pull-subject { text-decoration: line-through; } .pull-thumb { width: 38px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--surface-3); } .pull-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pull-info { flex: 1; min-width: 0; } .pull-subject { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pull-subject::before { content: "“"; } .pull-subject::after { content: "”"; } .pull-sub { font-size: var(--fs-meta); color: var(--text-2); } .pull-by { color: #54d38a; font-weight: 700; } .pull-code { text-align: right; flex-shrink: 0; line-height: 1.25; } .pull-code b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .pull-stock { display: block; font-size: var(--fs-meta); font-weight: 700; } .pull-stock.in { color: #54d38a; } .pull-stock.zero { color: #d9a514; } .pull-stock.none { color: var(--text-3); } /* live chat column */ .assist-side { position: sticky; top: 16px; } .assist-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .assist-chat-title { font-weight: 800; font-size: var(--fs-panel); } .assist-chat-meta { font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; } .assist-feed { display: flex; flex-direction: column; gap: 2px; max-height: 68vh; overflow-y: auto; padding-right: 4px; } .assist-msg { font-size: 13px; padding: 6px 10px; border-radius: var(--radius); line-height: 1.4; } .assist-msg:hover { background: var(--surface); } .assist-msg-req { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .assist-msg-user { font-weight: 700; margin-right: 6px; color: var(--text); } .assist-msg-req .assist-msg-user { color: var(--accent); } .assist-msg-text { color: var(--text-2); overflow-wrap: anywhere; } .assist-msg-tag { font-size: var(--fs-meta); font-weight: 800; color: var(--accent); margin-left: 7px; vertical-align: middle; } /* ---- live assist motion (subtle; the global prefers-reduced-motion rule neutralises all of this for users who ask for less movement) ---- */ @keyframes assistIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes assistPop { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes assistCheckPop { 0% { transform: scale(.3); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } } @keyframes assistGrabFlash { from { background: color-mix(in srgb, var(--good-strong) 26%, var(--surface)); border-color: var(--good-strong); } to { background: var(--surface); } } /* new chat message + new pull-list row slide/fade in */ .assist-msg.is-new { animation: assistIn .3s ease-out both; } .pull-row.is-new { animation: assistIn .34s cubic-bezier(.16, 1, .3, 1) both; } /* a fresh request cross-fades the whole spotlight, then staggers its posters in */ .spotlight.is-fresh { animation: scaleIn .36s cubic-bezier(.16, 1, .3, 1) both; } .spotlight.is-fresh .spot-match { animation: assistIn .42s ease-out both; } .spotlight.is-fresh .spot-match:nth-child(1) { animation-delay: .05s; } .spotlight.is-fresh .spot-match:nth-child(2) { animation-delay: .11s; } .spotlight.is-fresh .spot-match:nth-child(3) { animation-delay: .17s; } .spotlight.is-fresh .spot-match:nth-child(4) { animation-delay: .23s; } /* check-off pop — on your own tick and when a teammate grabs one remotely */ .pull-row.just-done { animation: assistGrabFlash .85s ease-out; } .pull-row.just-done .pull-check { animation: assistCheckPop .36s cubic-bezier(.2, 1.5, .5, 1) both; } .pull-check svg { transition: transform .12s; } /* a counter ticks up/down -> a quick pop so the eye catches the change */ .pulse-stat b.bumped { display: inline-block; animation: assistPop .42s ease-out; } /* ---- live assist modes: Requests | Surprise sets (chat column shared) ---- */ .assist-switch { margin-bottom: 14px; } .assist-mode-requests #assistSurprise, .assist-mode-requests #assistSurpriseStatus { display: none; } /* per-channel status strip in the surprise view: live? and which show format */ .assist-surprise-status { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .ss-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 13px; font-size: 13px; } .ss-status.live { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .ss-status-chan { font-weight: 800; } .ss-status-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-2); } .ss-status.live .ss-status-live { color: var(--accent); } .ss-fmt { margin-left: auto; font-weight: 700; font-size: 12px; color: var(--text-3); } .ss-fmt.yes { color: var(--good-strong); } .ss-fmt.no { color: #d9a514; } .ss-empty-main { padding: 6px 4px 2px; } .assist-mode-surprise #assistCurrent, .assist-mode-surprise #assistPullHead, .assist-mode-surprise #assistQueue, .assist-mode-surprise #assistPulse { display: none; } /* ---- TV mode · surprise sets ---- */ .tv-hero-card.tier-ceiling::before { background: #f0c24b; } .tv-hero-card.tier-mid::before { background: #4fa3ff; } .tv-hero-card.tier-floor::before { background: #8b95a3; } .tv-tier { display: inline-block; font-size: 1.05vw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .22vw .8vw; border-radius: 99px; line-height: 1.4; } .tv-tier.ceiling { background: rgba(240, 194, 75, .18); color: #f0c24b; } .tv-tier.mid { background: rgba(79, 163, 255, .16); color: #4fa3ff; } .tv-tier.floor { background: rgba(139, 149, 163, .16); color: #aab3bf; } .tv-pull-buyer { font-size: 2.3vw; font-weight: 800; margin-top: .3vw; } .tv-pull-buyer span { color: var(--text-2); font-weight: 600; font-size: 1.4vw; } .tv-q .tv-tier { margin-left: auto; flex-shrink: 0; } .tv-chase { display: flex; flex-direction: column; gap: .15vw; padding: .55vw 1.2vw; border-radius: .8vw; border: 1px solid var(--border); } .tv-chase b { font-size: 1.3vw; font-weight: 800; } .tv-chase span { font-size: 1vw; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .tv-chase.in { border-color: rgba(47, 191, 113, .55); } .tv-chase.in span { color: #5fe39a; } .tv-chase.pulled { opacity: .55; } .tv-chase.pulled span { color: var(--text-3); } /* poster thumb on each pull row in the surprise panel */ .ss-thumb { width: 30px; height: 42px; border-radius: 4px; overflow: hidden; background: var(--surface-3); display: block; } .ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- whatnot surprise-set panel: who bought a spot and what they got ---- */ .assist-surprise { margin-bottom: 18px; } .ss-panel { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; } .ss-panel + .ss-panel { margin-top: 12px; } .ss-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .ss-title { font-weight: 800; font-size: var(--fs-panel); display: flex; align-items: center; gap: 8px; } .ss-chan { color: var(--text-2); font-weight: 700; } .ss-sub { font-size: var(--fs-meta); font-weight: 700; color: var(--text-3); } .ss-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .ss-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; } .ss-stat b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; } .ss-stat span { font-size: 12px; font-weight: 700; color: var(--text-3); } .ss-top { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .ss-top-chip { font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 3px 9px; } .ss-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; } .ss-pull { display: grid; grid-template-columns: 52px 30px auto 1fr auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; font-size: 13.5px; animation: assistMsgIn .3s ease-out both; } .ss-time { font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; } .ss-buyer { font-weight: 800; white-space: nowrap; } .ss-item { color: var(--text-2); overflow-wrap: anywhere; } .ss-del { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 12px; } .ss-del:hover { color: var(--bad-strong); } .ss-empty { color: var(--text-2); font-size: 13.5px; padding: 10px 2px; } @media (max-width: 700px) { .ss-pull { grid-template-columns: 1fr auto; } .ss-time, .ss-item { grid-column: 1 / -1; } } /* ---- inventory-overview popover (hover a pull row / click a chat request) ---- */ .assist-inv-pop { position: fixed; z-index: 300; width: 250px; max-width: calc(100vw - 16px); background: color-mix(in srgb, var(--surface) 88%, var(--bg)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); padding: 12px 13px; pointer-events: none; /* never steals hover from the row it describes */ animation: assistIn .16s ease-out both; } .assist-inv-pop[hidden] { display: none; } .aip-subject { font-weight: 800; font-size: 13.5px; margin-bottom: 8px; overflow-wrap: anywhere; } .aip-subject::before { content: "“"; } .aip-subject::after { content: "”"; } .aip-verdict { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; padding: 4px 11px; border-radius: 999px; margin-bottom: 11px; } .aip-verdict.have { background: color-mix(in srgb, var(--good-strong) 16%, transparent); color: #54d38a; } .aip-verdict.zero { background: color-mix(in srgb, #d9a514 18%, transparent); color: #e6bf4a; } .aip-verdict.none { background: color-mix(in srgb, var(--bad-strong) 16%, transparent); color: #f0787c; } .aip-matches { display: flex; gap: 8px; flex-wrap: wrap; } .aip-match { width: 54px; } .aip-match img { width: 100%; aspect-ratio: 178/258; object-fit: cover; border-radius: var(--radius-sm); display: block; } .aip-match.out img { opacity: .4; } .aip-code { font-size: var(--fs-meta); font-weight: 800; margin-top: 4px; } .aip-stock { font-size: var(--fs-meta); font-weight: 700; } .aip-stock.in { color: #54d38a; } .aip-stock.out { color: var(--text-3); } .aip-none { font-size: 12.5px; color: var(--text-2); line-height: 1.45; } /* affordance: a chat request is clickable, and lights up while its overview is open */ .assist-msg-req[data-req-subject] { cursor: pointer; } .assist-msg-req.aip-active { box-shadow: 0 0 0 1.5px var(--accent); } /* ---- topbar TV-mode button ---- */ .assist-topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .assist-tv-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); padding: 7px 13px; font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color .12s, color .12s; } .assist-tv-btn:hover { border-color: var(--accent); color: var(--accent); } .assist-tv-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* ---- TV mode: full-screen, glanceable, sized in vw so it scales to any TV ---- */ .assist-tv { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; gap: 1.6vw; padding: 2vw 2.4vw; color: var(--text); background: radial-gradient(120% 100% at 25% -10%, #171b21, var(--bg) 60%); } .assist-tv[hidden] { display: none; } .tv-top { display: flex; align-items: center; justify-content: space-between; gap: 2vw; } .tv-brand { display: flex; align-items: center; gap: .8vw; font-weight: 800; font-size: 1.9vw; } .tv-brand .brand-dot { width: 1.1vw; height: 1.1vw; } .tv-live { display: flex; align-items: center; gap: .7vw; font-weight: 800; font-size: 1.55vw; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; } .tv-live-dot { width: 1vw; height: 1vw; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease infinite; flex-shrink: 0; } .tv-off { color: var(--text-3); } .tv-viewers { color: var(--text); margin-left: .5vw; } .tv-top-right { display: flex; align-items: center; gap: 1.4vw; } .tv-clock { font-size: 1.6vw; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; } .tv-exit { width: 3vw; height: 3vw; border-radius: .7vw; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 1.4vw; cursor: pointer; } .tv-exit:hover { color: var(--bad-strong); border-color: var(--bad-strong); } .tv-body { flex: 1; display: grid; grid-template-columns: 1.65fr 1fr; gap: 2vw; min-height: 0; } .tv-hero { display: flex; min-height: 0; } .tv-hero-card { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.6vw; padding: 2.4vw 2.6vw; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); animation: tvHeroIn .42s cubic-bezier(.16, 1, .3, 1) both; } .tv-hero-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: .55vw; background: var(--border); } .tv-hero-card.have::before { background: var(--good-strong); } .tv-hero-card.zero::before { background: #d9a514; } .tv-hero-card.none::before { background: var(--bad-strong); } .tv-hero-eyebrow { font-size: 1.15vw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: .7vw; } .tv-hero-subject { font-size: clamp(40px, 6.2vw, 150px); font-weight: 800; line-height: 1.02; letter-spacing: -.015em; margin: .5vw 0 1.1vw; overflow-wrap: anywhere; } .tv-hero-subject::before { content: "“"; } .tv-hero-subject::after { content: "”"; } .tv-hero-verdict { align-self: flex-start; display: inline-flex; align-items: center; font-size: 2vw; font-weight: 800; padding: .7vw 1.5vw; border-radius: 99px; } .tv-hero-card.have .tv-hero-verdict { background: color-mix(in srgb, var(--good-strong) 20%, transparent); color: #61e39d; } .tv-hero-card.zero .tv-hero-verdict { background: color-mix(in srgb, #d9a514 22%, transparent); color: #edc84f; } .tv-hero-card.none .tv-hero-verdict { background: color-mix(in srgb, var(--bad-strong) 20%, transparent); color: #f78a8d; } .tv-posters { display: flex; gap: 1.3vw; margin-top: auto; padding-top: 1.6vw; } .tv-poster { flex: 1 1 0; max-width: 12vw; } .tv-poster img { width: 100%; aspect-ratio: 178/258; object-fit: cover; border-radius: .9vw; box-shadow: 0 1vw 3vw rgba(0, 0, 0, .5); display: block; } .tv-poster.out img { opacity: .38; } .tv-poster-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: .5vw; font-size: 1.25vw; font-weight: 800; } .tv-poster-meta span { color: #61e39d; } .tv-poster.out .tv-poster-meta span { color: var(--text-3); } .tv-hero-none { font-size: 1.9vw; color: var(--text-2); margin-top: auto; padding-top: 1.6vw; line-height: 1.4; } .tv-tags { display: flex; flex-wrap: wrap; gap: .6vw; margin-top: 1.5vw; } .tv-tag { font-size: 1.1vw; font-weight: 700; color: var(--text-2); background: var(--surface-3); border: 1px solid var(--border); border-radius: 99px; padding: .35vw 1vw; } .tv-hero-card.idle { align-items: flex-start; justify-content: center; } .tv-idle-big { font-size: 6vw; font-weight: 800; } .tv-idle-sub { font-size: 1.6vw; color: var(--text-2); margin-top: .5vw; } .tv-queue-wrap { display: flex; flex-direction: column; min-height: 0; } .tv-queue-head { font-size: 1.25vw; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1vw; } .tv-queue { display: flex; flex-direction: column; gap: 1vw; overflow: hidden; } .tv-q { display: flex; align-items: center; gap: 1.1vw; background: var(--surface); border: 1px solid var(--border); border-radius: 1vw; padding: .85vw 1.2vw; } .tv-q.done { opacity: .42; } .tv-q-thumb { width: 3.3vw; height: 4.7vw; border-radius: .5vw; overflow: hidden; flex-shrink: 0; background: var(--surface-3); } .tv-q-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .tv-q-info { flex: 1; min-width: 0; } .tv-q-subject { font-size: 1.7vw; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-q-sub { font-size: 1.05vw; color: var(--text-2); font-weight: 700; } .tv-q-stock { font-size: 2.3vw; font-weight: 800; font-variant-numeric: tabular-nums; padding-left: .6vw; } .tv-q-stock.in { color: #61e39d; } .tv-q-stock.zero { color: #edc84f; } .tv-queue-empty { color: var(--text-3); font-size: 1.4vw; padding: 2vw .5vw; } .tv-bar { display: flex; align-items: center; gap: 3.4vw; padding: 1.1vw 1.8vw; background: var(--surface); border: 1px solid var(--border); border-radius: 1.2vw; } .tv-stat { display: flex; align-items: baseline; gap: .7vw; } .tv-stat b { font-size: 2.6vw; font-weight: 800; font-variant-numeric: tabular-nums; } .tv-stat span { font-size: 1.25vw; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; } .tv-stat.good b { color: #61e39d; } .tv-stat.miss b { color: #f78a8d; } @keyframes tvHeroIn { from { opacity: 0; transform: translateY(1.4vw) scale(.985); } to { opacity: 1; transform: none; } } /* hover a pull-queue row -> big poster preview so you can see the design */ .tv-preview { position: fixed; inset: 0; z-index: 510; display: grid; place-items: center; padding: 3vw; pointer-events: none; background: rgba(6, 8, 11, .66); backdrop-filter: blur(4px); animation: tvPvIn .15s ease-out; } .tv-preview[hidden] { display: none; } .tv-preview-card { display: flex; flex-direction: column; align-items: center; gap: 1.2vw; max-width: 94vw; max-height: 94vh; text-align: center; } .tv-preview-subject { font-size: clamp(30px, 4.2vw, 88px); font-weight: 800; line-height: 1.05; letter-spacing: -.015em; overflow-wrap: anywhere; } .tv-preview-subject::before { content: "“"; } .tv-preview-subject::after { content: "”"; } .tv-preview-verdict { display: inline-flex; align-items: center; font-size: 1.7vw; font-weight: 800; padding: .55vw 1.4vw; border-radius: 99px; } .tv-preview-card.have .tv-preview-verdict { background: color-mix(in srgb, var(--good-strong) 20%, transparent); color: #61e39d; } .tv-preview-card.zero .tv-preview-verdict { background: color-mix(in srgb, #d9a514 22%, transparent); color: #edc84f; } .tv-preview-card.none .tv-preview-verdict { background: color-mix(in srgb, var(--bad-strong) 20%, transparent); color: #f78a8d; } .tv-preview-posters { display: flex; gap: 1.6vw; align-items: flex-end; justify-content: center; margin-top: .4vw; } .tv-pv { display: flex; flex-direction: column; align-items: center; margin: 0; } .tv-pv img { height: min(56vh, 34vw); width: auto; max-width: 22vw; object-fit: cover; border-radius: 1vw; box-shadow: 0 2vw 5vw rgba(0, 0, 0, .6); display: block; } .tv-pv.out img { opacity: .4; } .tv-pv figcaption { display: flex; gap: .7vw; align-items: baseline; margin-top: .7vw; font-size: 1.4vw; font-weight: 800; } .tv-pv figcaption span { font-size: 1.15vw; font-weight: 700; color: #61e39d; } .tv-pv.out figcaption span { color: var(--text-3); } @keyframes tvPvIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .assist-layout { grid-template-columns: 1fr; } .assist-side { position: static; } .assist-feed { max-height: 44vh; } .spot-subject { font-size: 25px; } } .assist-platform { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); padding: 0 10px; font-weight: 700; font-size: 13.5px; } /* learn leaderboard */ .learn-board { max-width: 560px; } .learn-board[hidden] { display: none; } .board-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .board-table th { text-align: left; font-size: var(--fs-meta); color: var(--text-2); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--border); } .board-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; } .board-table tr:last-child td { border-bottom: none; } .board-rank { font-weight: 800; font-size: 15px; width: 44px; } .board-user { font-weight: 700; } .board-streak { font-weight: 800; font-variant-numeric: tabular-nums; } .board-me { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .board-you { font-size: 12px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 7px; margin-left: 4px; } .board-foot { margin-top: 12px; font-size: 12.5px; } /* learn: speed round + say-it */ .learn-quiz[hidden] { display: none; } .speed-intro { text-align: center; padding: 34px 22px; } .speed-big { font-size: 46px; line-height: 1; color: var(--warn); } .speed-intro h3 { font-size: var(--fs-page); margin: 6px 0 8px; } .speed-intro p { max-width: 40ch; margin: 0 auto 14px; } .speed-best { font-size: 14px; color: var(--text-2); } .speed-hud { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 16px; margin-bottom: 12px; font-variant-numeric: tabular-nums; } .speed-score { color: var(--accent); } #speedTimer { color: var(--text); } .say-card { text-align: center; } .say-name { font-size: 30px; font-weight: 800; margin: 14px 0 2px; } .say-pron { font-family: ui-monospace, monospace; font-size: 20px; color: var(--accent); font-weight: 700; letter-spacing: .01em; } .say-fr { font-size: 13px; color: var(--text-2); margin-top: 4px; } .say-hear { margin: 16px auto 0; display: inline-flex; } .say-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .say-practice.on { border-color: #d9a514; color: #d9a514; } .say-count { margin-top: 12px; font-size: 12px; } .board-table th:nth-child(3), .board-table th:nth-child(4) { white-space: nowrap; } /* learn: focus selector, report button, reported-cards panel */ .learn-focus { margin-left: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); padding: 6px 10px; font-weight: 700; font-size: 13px; max-width: 220px; } .quiz-reveal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .quiz-report-btn { border: 1px solid var(--border); background: none; color: var(--text-2); font-weight: 700; font-size: 12px; border-radius: 999px; padding: 7px 13px; cursor: pointer; } .quiz-report-btn:hover:not(:disabled) { border-color: var(--bad-strong); color: var(--bad-strong); } .quiz-report-btn.reported { color: var(--good-strong); border-color: var(--good-strong); } .reports-head { font-size: 15px; margin: 26px 0 4px; display: flex; align-items: center; gap: 8px; } .reports-count { background: var(--bad-strong); color: #fff; font-size: var(--fs-meta); font-weight: 800; border-radius: 999px; padding: 1px 8px; } .reports-list { display: flex; flex-direction: column; gap: 8px; } .report-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } .report-row img { width: 38px; height: 54px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .report-meta { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; } .report-tags { font-size: 12px; color: var(--accent); } /* admin tag editor in the design detail modal */ .gallery-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .gallery-tags-text { font-size: 13px; color: var(--text-2); } .gallery-tags-editor { margin: 8px 0 4px; } .gallery-tags-editor .inventory-search { width: 100%; } .gallery-tags-actions { display: flex; gap: 8px; margin-top: 8px; } /* pre-answer report button on the quiz image */ .quiz-img-wrap { position: relative; } .quiz-flag-btn { position: absolute; top: 8px; right: 8px; z-index: 2; border: none; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(3px); font-size: var(--fs-meta); font-weight: 700; border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background .12s; } .quiz-flag-btn:hover:not(:disabled) { background: var(--bad-strong); } .quiz-flag-btn.reported { background: var(--good-strong); color: #06210f; } /* notification center */ .notif-wrap { position: relative; } .notif-btn { position: relative; } .notif-badge { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px; background: var(--bad-strong); color: #fff; font-size: var(--fs-meta); font-weight: 800; line-height: 15px; border-radius: 999px; text-align: center; box-shadow: 0 0 0 2px var(--surface, #1a1a1a); } .notif-panel { /* fixed so it escapes the sidebar's overflow clipping and floats over content */ position: fixed; left: 14px; bottom: 58px; width: min(320px, calc(100vw - 28px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 34px rgba(0,0,0,.45); z-index: 200; overflow: hidden; } .notif-panel-head { font-size: 12px; font-weight: 800; color: var(--text-2); padding: 12px 14px 8px; } .notif-list { max-height: min(60vh, calc(100vh - 170px)); overflow-y: auto; padding: 0 6px 6px; scrollbar-width: thin; } /* when the list scrolls, fade the bottom edge so it reads as "more below", not "cut off" */ .notif-panel::after { content: '↓ more'; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: var(--fs-meta); font-weight: 800; color: var(--text-3); background: linear-gradient(to bottom, transparent, var(--surface) 70%); pointer-events: none; opacity: 0; transition: opacity .15s; } .notif-panel.has-more:not(.at-end)::after { opacity: 1; } .notif-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 10px 10px; cursor: pointer; color: var(--text); } .notif-item:hover { background: var(--surface-2); } .notif-item.unread { background: color-mix(in srgb, var(--accent) 8%, transparent); } .notif-item.unread .notif-text { font-weight: 700; } .notif-icon { font-size: 16px; flex-shrink: 0; color: var(--text-2); display: inline-flex; } .notif-text { flex: 1; font-size: 13px; min-width: 0; line-height: 1.3; } .notif-when { font-size: var(--fs-meta); color: var(--text-3, var(--text-2)); flex-shrink: 0; } .notif-empty { padding: 20px 14px; text-align: center; color: var(--text-2); font-size: 13px; } /* notification dismiss + clear-all */ .notif-panel-head { display: flex; align-items: center; justify-content: space-between; } .notif-clear-all { background: none; border: none; color: var(--accent); font-size: var(--fs-meta); font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; padding: 0; } .notif-clear-all:hover { text-decoration: underline; } .notif-item { display: flex; align-items: stretch; gap: 0; padding: 0; } .notif-go { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 10px 6px 10px 10px; cursor: pointer; color: var(--text); } .notif-dismiss { background: none; border: none; color: var(--text-3, var(--text-2)); cursor: pointer; padding: 0 10px; font-size: 13px; border-radius: var(--radius-sm); flex-shrink: 0; } .notif-dismiss:hover { color: var(--bad-strong); } /* sidebar footer — modern user card */ .sidebar-foot { border-top: none; padding: 10px 2px 0; } .user-card { display: flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--surface) 80%, var(--bg)); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px; } .user-main { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; background: none; border: none; cursor: pointer; text-align: left; padding: 3px; border-radius: var(--radius); transition: background .12s; } .user-main:hover { background: var(--surface-2); } .user-avatar { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 13.5px; display: flex; align-items: center; justify-content: center; } .user-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .user-name { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .user-role { font-size: var(--fs-meta); font-weight: 800; color: var(--text-2); line-height: 1.2; } .user-actions { display: flex; align-items: center; gap: 1px; flex-shrink: 0; } .user-actions .icon-btn { width: 26px; height: 26px; border: none; background: none; border-radius: var(--radius); color: var(--text-2); display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; } .user-actions .icon-btn:hover { background: var(--surface-2); color: var(--text); } .user-actions .notif-badge { top: 1px; right: 1px; box-shadow: none; } .notif-panel { bottom: 76px; } .user-caret { margin-left: auto; color: var(--text-3); flex-shrink: 0; transition: transform .15s ease, color .12s; } .user-main:hover .user-caret { color: var(--text-2); } .user-card.menu-open .user-caret { transform: rotate(180deg); color: var(--accent); } .user-card.menu-open .user-main { background: var(--surface-2); } /* ---- account menu: expands seamlessly UP out of the user card ---- */ .acct-pop { position: fixed; z-index: 200; overflow: hidden; background: color-mix(in srgb, var(--surface) 80%, var(--bg)); /* match the user card exactly */ border: 1px solid var(--border); border-bottom: none; border-radius: 15px 15px 0 0; box-shadow: 0 -12px 36px rgba(0,0,0,.45); display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s cubic-bezier(.16, 1, .3, 1); } .acct-pop.open { grid-template-rows: 1fr; } .acct-pop-inner { overflow: hidden; min-height: 0; } .user-card.menu-open { border-top-left-radius: 0; border-top-right-radius: 0; } .acct-pop-banner { height: 50px; background: var(--surface-3); } .acct-pop-head { padding: 0 14px 13px; margin-top: -24px; } .acctp-avatar { width: 58px; height: 58px; border-radius: 17px; border: 4px solid color-mix(in srgb, var(--surface) 80%, var(--bg)); background: linear-gradient(135deg, var(--accent), var(--accent-2)); background-size: cover; background-position: center; color: #fff; font-weight: 800; font-size: 23px; display: flex; align-items: center; justify-content: center; } .acctp-avatar.has-photo { color: transparent; } .acct-pop-name { font-weight: 800; font-size: 15.5px; margin-top: 9px; } .acct-pop-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .acct-pop-bio { font-size: 12px; color: var(--text-2); margin-top: 10px; line-height: 1.45; } .acct-pop-menu { padding: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .acct-pop-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: none; background: none; color: var(--text); font-size: 13.5px; font-weight: 600; padding: 10px; border-radius: var(--radius); cursor: pointer; } .acct-pop-item:hover { background: var(--surface-3); } .acct-pop-ico { width: 18px; text-align: center; color: var(--text-2); font-size: 15px; display: inline-flex; justify-content: center; } .acct-pop-item:hover .acct-pop-ico { color: var(--text); } .acct-pop-arrow { margin-left: auto; color: var(--text-3); font-size: 16px; } .acct-pop-item.danger { color: #ff6b6b; } .acct-pop-item.danger:hover { background: var(--bad-soft); } .acct-pop-item.danger .acct-pop-ico { color: #ff6b6b; } /* ---- settings redesign ---- */ .settings-nav-label { font-size: 12px; font-weight: 800; color: var(--text-3); padding: 2px 12px 8px; } .settings-nav-btn { display: flex; align-items: center; gap: 10px; } .settings-nav-ico { font-size: 15px; width: 18px; text-align: center; display: inline-flex; justify-content: center; color: var(--text-2); } .settings-nav-btn.active { color: var(--accent); background: var(--accent-soft); } .settings-nav-spacer { flex: 1; min-height: 8px; } .settings-phone-head { display: none; } .settings-logout { color: #ff6b6b; } .settings-logout:hover { color: #ff6b6b; background: var(--bad-soft); } .acct-hero { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); margin-bottom: 16px; padding: 18px 20px; } .acct-hero-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* clickable avatar → change photo (Discord-style, pencil on hover) */ .acct-avatar-wrap { position: relative; flex-shrink: 0; } .acct-avatar-btn { display: block; padding: 0; border: none; background: none; cursor: pointer; border-radius: 22px; position: relative; } .acct-hero-avatar { width: 84px; height: 84px; border-radius: 22px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); background-size: cover; background-position: center; color: #fff; font-weight: 800; font-size: 32px; display: grid; place-items: center; } .acct-avatar-edit { position: absolute; inset: 0; border-radius: 22px; background: rgba(0,0,0,.52); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .13s ease; pointer-events: none; } .acct-avatar-btn:hover .acct-avatar-edit, .acct-avatar-btn:focus-visible .acct-avatar-edit { opacity: 1; } .acct-avatar-remove { position: absolute; top: -5px; right: -5px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface-2); background: var(--bad-strong); color: #fff; cursor: pointer; font-size: var(--fs-meta); line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 2; } .acct-avatar-remove:hover { filter: brightness(1.1); } .acct-avatar-remove[hidden] { display: none; } .acct-hero-id { flex: 1; min-width: 150px; } .settings-account-name { font-weight: 800; font-size: 20px; margin-bottom: 7px; letter-spacing: -.01em; } .acct-hero-roles { display: flex; flex-wrap: wrap; gap: 6px; } /* profile-picture cropper */ .crop-modal { max-width: 360px; text-align: center; } .crop-title { font-size: var(--fs-panel); font-weight: 800; margin: 2px 0 16px; } .crop-stage { position: relative; width: 280px; height: 280px; margin: 0 auto 16px; border-radius: var(--radius-lg); overflow: hidden; background: #000; touch-action: none; } #cropCanvas { width: 280px; height: 280px; display: block; cursor: grab; touch-action: none; } #cropCanvas:active { cursor: grabbing; } .crop-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 22%; border: 2px solid rgba(255,255,255,.55); box-shadow: 0 0 0 9999px rgba(0,0,0,.34); } .crop-controls { display: flex; align-items: center; gap: 12px; padding: 0 4px; margin-bottom: 20px; } .crop-controls .crop-ico { color: var(--text-3); flex-shrink: 0; } #cropZoom { flex: 1; accent-color: var(--accent); cursor: pointer; } .crop-rotate { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; } .crop-rotate:hover { color: var(--text); border-color: var(--text-3); } .crop-actions { display: flex; gap: 10px; } .crop-actions .btn-secondary { flex: 1; } .crop-actions .crop-apply { flex: 2; width: auto; margin: 0; } .settings-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; } .settings-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .settings-card-head h3 { font-size: var(--fs-panel); font-weight: 800; margin: 0; } .settings-card .bio-section { margin: 0; } .settings-card .auth-form { margin: 0; } .settings-card .discord-section { margin: 0; } /* ---- profile banner editor ---- */ .banner-editor { display: flex; flex-direction: column; gap: 14px; } .banner-preview-avatar.has-photo { color: transparent; } .banner-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .banner-swatch { position: relative; width: 34px; height: 34px; border-radius: 9px; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .1s; } .banner-swatch:hover { transform: translateY(-1px); } .banner-swatch.active { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--text); } .banner-swatch.active::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } .banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .banner-custom { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 13px; cursor: pointer; font-weight: 700; font-size: 13px; } .banner-custom:hover { border-color: var(--accent); } .banner-custom-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); } .banner-custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .banner-remove { margin-left: auto; } .banner-remove[hidden] { display: none; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .settings-row-label { font-weight: 700; font-size: 13.5px; } .settings-row-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; } .theme-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; } .theme-group-label { font-size: 12px; font-weight: 800; color: var(--text-3); margin-bottom: 8px; } .theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; } .theme-card { background: none; border: 2px solid var(--border); border-radius: var(--radius); padding: 6px; cursor: pointer; text-align: left; color: var(--text-2); font: inherit; } .theme-card:hover { border-color: var(--text-3); color: var(--text); } .theme-card.active { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); } .theme-thumb { display: block; height: 58px; border-radius: var(--radius); padding: 6px; overflow: hidden; } .theme-thumb-bar { display: flex; align-items: center; gap: 4px; height: 10px; border-radius: 4px; padding: 0 4px; } .theme-thumb-bar i { display: block; width: 6px; height: 6px; border-radius: 50%; } .theme-thumb-bar b { display: block; height: 3px; width: 40%; border-radius: 2px; opacity: .7; } .theme-thumb-card { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; border-radius: var(--radius-sm); padding: 6px; } .theme-thumb-card b { display: block; height: 3px; width: 80%; border-radius: 2px; } .theme-name { display: block; font-size: 12px; font-weight: 700; margin: 7px 2px 2px; } .theme-blurb { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-meta); color: var(--text-3); margin: 0 2px 2px; line-height: 1.35; } .notif-prefs-list { display: flex; flex-direction: column; } .notif-pref-row { padding: 13px 0; border-top: 1px solid var(--border); } .notif-pref-row:first-child { border-top: none; padding-top: 2px; } /* sliding on/off toggle */ .toggle { flex-shrink: 0; width: 42px; height: 25px; border-radius: 999px; border: none; cursor: pointer; background: var(--surface-3); position: relative; padding: 0; transition: background .16s ease; } .toggle.on { background: var(--accent); } .toggle-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .16s cubic-bezier(.16,1,.3,1); } .toggle.on .toggle-knob { transform: translateX(17px); } /* custom profile pictures */ .user-avatar.has-photo, .avatar.has-photo { background-size: cover; background-position: center; color: transparent; } /* team chat — slack-style */ .slack-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; height: calc(100vh - 168px); min-height: 420px; } .slack-rail { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 10px; height: 100%; overflow-y: auto; } .slack-rail-label { font-size: 12px; font-weight: 800; color: var(--text-3, var(--text-2)); padding: 4px 8px 8px; } .slack-chan { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: none; background: none; color: var(--text-2); font-weight: 600; font-size: 13.5px; padding: 8px 10px; border-radius: 9px; cursor: pointer; position: relative; } .slack-chan:hover { background: var(--surface-2); color: var(--text); } .slack-chan.active { background: var(--accent-soft); color: var(--accent); } .slack-chan.active::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .slack-chan-hash { opacity: .5; font-weight: 800; } .slack-chan-count { margin-left: auto; font-size: var(--fs-meta); font-weight: 800; color: var(--text-2); background: var(--surface-3); border-radius: 999px; padding: 1px 7px; } .slack-chan.active .slack-chan-count { background: var(--accent-soft); color: var(--accent); } .slack-chan-count.unread { background: var(--accent); color: #fff; } /* direct-message rows in the rail */ .rail-dm-label { margin-top: 12px; } .slack-dm { gap: 8px; } .slack-dm .dm-av { width: 22px; height: 22px; font-size: var(--fs-meta); border-radius: 7px; flex-shrink: 0; } .slack-dm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .slack-dm.has-unread .slack-dm-name { color: var(--text); font-weight: 700; } /* DM conversation header: avatar + stacked name/subtitle */ .dm-head { display: flex; align-items: center; gap: 11px; cursor: pointer; } .dm-head .dm-av { width: 36px; height: 36px; font-size: 14px; border-radius: 11px; } .dm-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .dm-head-name { font-size: 15px; font-weight: 800; line-height: 1.2; } .dm-head-sub { font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); line-height: 1.2; } /* unread-DM badge on the Chat sidebar nav item */ .nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: var(--fs-micro); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .nav-badge[hidden] { display: none; } /* presence avatars (used by the header "Here now" cluster) */ .pres-stack { display: inline-flex; align-items: center; } .pres-av { position: relative; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; margin-left: -6px; border: 2px solid var(--surface); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 8px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .pres-stack .pres-av:first-child { margin-left: 0; } .pres-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pres-more { font-size: var(--fs-meta); font-weight: 700; color: var(--text-3); margin-left: 3px; } /* "here now" cluster in the channel header */ .slack-chan-head-here { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; align-self: center; } .slack-chan-head-here:empty { display: none; } .here-label { font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); } .slack-chan-head-here .pres-av { width: 24px; height: 24px; font-size: var(--fs-meta); cursor: pointer; } .slack-chan-head-here .pres-av:hover { filter: brightness(1.08); } .slack-main { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: 100%; } .slack-chan-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .slack-chan-head-name { font-size: 15px; font-weight: 800; } .slack-chan-head-sub { font-size: 12px; color: var(--text-2); } .slack-feed { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 8px; overflow-y: auto; flex: 1; min-height: 0; } .slack-msg { display: flex; gap: 10px; padding: 7px 8px; border-radius: var(--radius); } .slack-msg:hover { background: var(--surface-2); } .slack-msg.resolved { opacity: .6; } .slack-msg-body { flex: 1; min-width: 0; } .slack-msg-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-2); } .slack-msg-meta b { color: var(--text); font-size: 13px; } .slack-resolved { color: var(--good-strong); font-weight: 700; font-size: var(--fs-meta); } .slack-msg-actions { margin-left: auto; opacity: 0; display: flex; gap: 2px; transition: opacity .12s; } .slack-msg:hover .slack-msg-actions { opacity: 1; } .slack-act { border: none; background: none; cursor: pointer; font-size: 12px; color: var(--text-2); padding: 2px 6px; border-radius: var(--radius-sm); } .slack-act:hover { background: var(--surface); color: var(--text); } .slack-msg-text { font-size: 14px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; } .slack-thread-toggle { border: none; background: none; color: var(--text-2); font-size: var(--fs-meta); font-weight: 700; cursor: pointer; padding: 3px 0 0; } .slack-thread-toggle:hover { color: var(--accent); } .slack-thread { border-left: 2px solid var(--border); margin-top: 6px; padding-left: 10px; display: flex; flex-direction: column; gap: 2px; } .slack-reply { padding: 5px 6px; } .slack-reply .f-avatar { width: 24px; height: 24px; font-size: var(--fs-meta); } .slack-thread-composer { display: flex; gap: 8px; padding: 6px 6px 2px; } .slack-thread-input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 7px 10px; font-size: 13px; outline: none; } .slack-thread-input:focus { border-color: var(--accent); } .slack-composer-wrap { padding: 12px 14px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, var(--bg)); } /* shared chat avatar */ .f-avatar { position: relative; width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; } .f-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* bio */ .bio-section { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 12px 0 4px; } .bio-section textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px; resize: vertical; outline: none; } .bio-section textarea:focus { border-color: var(--accent); } @media (max-width: 760px) { .slack-wrap { grid-template-columns: 1fr; height: auto; gap: 10px; } .slack-rail { height: auto; padding: 8px; } .slack-rail-label { display: none; } /* the channel buttons live in #slackRail — make THAT a horizontal, swipeable strip instead of a tall column */ #slackRail { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #slackRail::-webkit-scrollbar { display: none; } .slack-chan { width: auto; flex: 0 0 auto; white-space: nowrap; } .slack-chan.active::before { display: none; } .slack-main { height: 68vh; min-height: 360px; } .slack-chan-head { padding: 12px 14px; } .slack-feed { padding: 10px 10px 6px; } .slack-composer-wrap { padding: 10px; } /* 16px inputs stop iOS Safari from zooming in when the box is focused */ .slack-composer textarea, .slack-thread-input { font-size: 16px; } } /* touch devices have no hover, so keep admin message actions reachable */ @media (hover: none) { .slack-msg-actions { opacity: .55; } .slack-msg-actions:active { opacity: 1; } } /* discord-style mini profile card */ [data-profile] { cursor: pointer; } .mini-profile { position: fixed; width: 280px; z-index: 300; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,.55); animation: mp-in .14s ease; } @keyframes mp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .mp-banner { height: 64px; background: var(--surface-3); } .mp-avatar { position: absolute; top: 28px; left: 16px; width: 68px; height: 68px; border-radius: 50%; border: 5px solid var(--surface); overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 26px; display: flex; align-items: center; justify-content: center; } .mp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mp-body { padding: 38px 16px 14px; } .mp-name { font-size: 18px; font-weight: 800; } .mp-flair { font-size: 14px; } .mp-bio { font-size: 13px; line-height: 1.5; background: var(--surface-2); border-radius: var(--radius); padding: 9px 11px; margin-bottom: 10px; word-break: break-word; } .mp-stats { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; color: var(--text-2); } .mp-joined { margin-left: auto; font-weight: 600; font-size: var(--fs-meta); } /* avatars in team pulse + learn leaderboard */ .home-pulse-row .f-avatar { flex: 0 0 22px; width: 22px; height: 22px; font-size: var(--fs-meta); border-radius: 7px; } .board-user-cell { display: inline-flex; align-items: center; gap: 8px; } .board-user-cell .f-avatar { width: 24px; height: 24px; font-size: var(--fs-meta); border-radius: 7px; } /* Discord-style composer: rounded bar, + on the left, icons on the right */ .slack-composer { display: flex; align-items: flex-end; gap: 6px; position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 6px; } .slack-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .slack-composer textarea { flex: 1; background: none; border: none; color: var(--text); padding: 9px 4px; font-size: 14px; font-family: inherit; outline: none; resize: none; line-height: 1.4; max-height: 130px; } .slack-composer textarea::placeholder { color: var(--text-3, var(--text-2)); } .composer-plus { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface-3, var(--surface)); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; align-self: flex-end; margin-bottom: 3px; } .composer-plus:hover { background: var(--accent); color: #fff; } .composer-actions { display: flex; align-items: center; gap: 2px; align-self: flex-end; margin-bottom: 3px; } .composer-icon, .composer-send { border: none; background: none; cursor: pointer; color: var(--text-2); width: 32px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); } .composer-icon:hover { color: var(--text); } .composer-send { color: var(--accent); } .composer-send:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); } .slack-attach-preview { position: relative; display: inline-block; margin: 0 0 8px 6px; } .slack-attach-preview[hidden] { display: none; } .slack-attach-preview img { max-height: 90px; border-radius: var(--radius); border: 1px solid var(--border); display: block; } .slack-attach-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--bad-strong); color: #fff; cursor: pointer; font-size: var(--fs-meta); } /* emoji picker */ .emoji-pop { position: absolute; bottom: calc(100% + 8px); right: 4px; z-index: 50; width: 268px; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 34px rgba(0,0,0,.45); padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .emoji-pop[hidden] { display: none; } .emoji-cell { border: none; background: none; cursor: pointer; font-size: 19px; padding: 4px; border-radius: 7px; line-height: 1; } .emoji-cell:hover { background: var(--surface-2); } .slack-attachment { display: inline-block; margin-top: 6px; } .slack-attachment img { max-width: 260px; max-height: 240px; border-radius: var(--radius); border: 1px solid var(--border); display: block; } /* @mention chips inside messages */ .mention { padding: 0 3px; border-radius: 4px; font-weight: 700; cursor: pointer; color: color-mix(in srgb, var(--accent) 80%, var(--text)); background: var(--accent-soft); } .mention:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); } .mention-bot { color: #d97757; background: rgba(217, 119, 87, .16); } .mention-bot:hover { background: rgba(217, 119, 87, .30); } /* #channel chips */ .channel-chip { padding: 0 4px 1px; border-radius: 4px; font-weight: 700; cursor: pointer; color: color-mix(in srgb, var(--accent) 80%, var(--text)); background: var(--accent-soft); } .channel-chip:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); } /* the built-in claude assistant: name colour + "AI" badge (its avatar is a real profile picture like any other member) */ .claude-name { color: #d97757 !important; } .bot-badge { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 800; vertical-align: middle; background: #d97757; color: #fff; } /* @mention autocomplete popup (Discord-style, floats above the composer) */ .slack-composer-wrap { position: relative; } .mention-pop { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 8px); z-index: 60; max-height: 264px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 38px rgba(0,0,0,.48); padding: 6px; } .mention-pop[hidden] { display: none; } .mention-pop::before { content: "MEMBERS"; display: block; font-size: var(--fs-meta); font-weight: 800; letter-spacing: .06em; color: var(--text-3); padding: 5px 8px 6px; } .mention-pop.channels::before { content: "CHANNELS"; } .mention-row-hash { width: 26px; text-align: center; font-size: 15px; flex-shrink: 0; } .mention-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 6px 8px; border-radius: var(--radius); color: var(--text); } .mention-row.active, .mention-row:hover { background: var(--accent-soft); } .mention-row-av { width: 26px; height: 26px; font-size: var(--fs-meta); border-radius: 7px; } .mention-row-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; } .mention-row-role { margin-left: auto; font-size: var(--fs-meta); color: var(--text-3); } /* typing indicator */ .slack-typing { padding: 2px 16px 6px; font-size: 12px; color: var(--text-2); font-style: italic; display: flex; align-items: center; gap: 6px; } .slack-typing[hidden] { display: none; } /* display:flex otherwise overrides the hidden attribute */ .typing-dots { display: inline-flex; gap: 3px; } .typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-2); animation: typing-b 1.2s infinite; } .typing-dots i:nth-child(2) { animation-delay: .2s; } .typing-dots i:nth-child(3) { animation-delay: .4s; } @keyframes typing-b { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .slack-chan-row .slack-chan { flex: 1; } .slack-chan-add { color: var(--text-2); font-weight: 600; opacity: .8; margin-top: 4px; } .slack-chan-add:hover { opacity: 1; } /* colored role names + effects */ .role-name { color: var(--rc, inherit); font-weight: 700; } .role-fx-glow { text-shadow: 0 0 6px color-mix(in srgb, var(--rc, var(--accent)) 70%, transparent); } .role-fx-gradient { background: linear-gradient(90deg, var(--rc, var(--accent)), var(--accent-2), var(--rc, var(--accent))); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; } .role-fx-shimmer { background: linear-gradient(90deg, var(--rc, var(--accent)) 0%, #fff 50%, var(--rc, var(--accent)) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: role-shimmer 2.4s linear infinite; } @keyframes role-shimmer { to { background-position: -200% center; } } .role-badge.role-fx-glow { box-shadow: 0 0 8px color-mix(in srgb, var(--rc, var(--accent)) 60%, transparent); } .role-badge[style*="--rc"] { color: var(--rc); } /* right-click context menu */ .ctx-menu { position: fixed; z-index: 400; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 34px rgba(0,0,0,.5); padding: 5px; animation: mp-in .12s ease; } .ctx-head { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .04em; color: var(--text-2); padding: 6px 10px 4px; } .ctx-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 7px; cursor: pointer; } .ctx-item:hover { background: var(--surface-2); } .ctx-item.danger { color: var(--bad-strong); } .ctx-item.danger:hover { background: color-mix(in srgb, var(--bad-strong) 12%, transparent); } /* role color/effect on the sidebar role label */ .user-role.role-colored { color: var(--rc); } /* mini-profile role pills (Discord-style: dot + tinted pill) */ .mp-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 12px; } .mp-role { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--rc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 32%, transparent); border-radius: 999px; padding: 3px 9px; } .mp-role-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rc); flex-shrink: 0; } .mp-role-name { font-size: var(--fs-meta); font-weight: 700; color: var(--rc); letter-spacing: .01em; } /* effects apply to the label text only */ .mp-role-name.role-fx-gradient, .mp-role-name.role-fx-shimmer { color: transparent; } .mp-flair { font-size: 15px; margin-left: 2px; } /* ---- live assist demo mode ---- */ .assist-demo-badge { font-size: 12px; font-weight: 800; color: #d9a514; background: rgba(217, 165, 20, .14); border: 1px solid rgba(217, 165, 20, .45); border-radius: 999px; padding: 6px 11px; } .assist-demo-badge[hidden] { display: none; } /* ---- team calendar ---- */ .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .cal-nav { display: flex; align-items: center; gap: 6px; } .cal-month-label { font-weight: 800; font-size: 15px; margin-left: 8px; } .cal-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-meta); color: var(--text-3); margin-bottom: 10px; } .cal-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ev, var(--text-3)); margin-right: 5px; } .cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .cal-month[hidden], .cal-agenda[hidden] { display: none; } /* the display rules above would otherwise beat the hidden attribute */ .cal-dow { font-size: 12px; font-weight: 800; color: var(--text-3); padding: 4px 6px; } .cal-day { min-height: 98px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; } .cal-day:hover { border-color: var(--text-3); } .cal-day.out { opacity: .45; } .cal-day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .cal-day.move { background: repeating-linear-gradient(-45deg, var(--surface) 0 8px, var(--surface-2) 8px 16px); } .cal-day.off { background: var(--surface-2); } .cal-day-num { font-size: 12px; font-weight: 700; color: var(--text-2); } .cal-day.today .cal-day-num { color: var(--accent); } .cal-ev { font-size: var(--fs-meta); font-weight: 600; line-height: 1.25; padding: 2px 6px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ev) 18%, transparent); color: var(--text); border-left: 3px solid var(--ev); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-ev.past { opacity: .55; } .cal-more { font-size: var(--fs-meta); color: var(--text-3); padding-left: 4px; } .cal-agenda { display: flex; flex-direction: column; gap: 14px; } .cal-agenda-date { font-size: 12px; font-weight: 800; color: var(--text-3); margin-bottom: 6px; } .cal-agenda-date.today { color: var(--accent); } .cal-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ev); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 6px; cursor: pointer; } .cal-row:hover { border-color: var(--text-3); border-left-color: var(--ev); } .cal-row.past { opacity: .6; } .cal-row-time { font-size: 12px; font-weight: 700; color: var(--text-2); } .cal-row-title { font-weight: 700; font-size: var(--fs-panel); } .cal-row-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; } .cal-row-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .cal-badge { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .cal-badge.tiktok { background: rgba(254, 44, 85, .15); color: #fe2c55; } .cal-badge.whatnot { background: rgba(255, 213, 0, .2); color: #b58a00; } .cal-upnext { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; } .cal-up { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ev); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; } .cal-up:hover { border-color: var(--text-3); border-left-color: var(--ev); } .cal-up-label { font-size: 12px; font-weight: 800; color: var(--text-3); } .cal-up-title { font-weight: 800; font-size: var(--fs-panel); margin: 3px 0 2px; } .cal-up-when { font-size: 12.5px; color: var(--text-2); } .cal-up-count { font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 4px; } .cal-up-roles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .cal-role { font-size: var(--fs-meta); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; color: var(--text-2); } .cal-role b { color: var(--text); } .cal-hours { margin-top: 18px; } .cal-hours h3 { font-size: var(--fs-panel); margin: 0 0 6px; } .cal-hours .muted { font-size: 12px; margin: 0 0 8px; } .cal-hours table { width: 100%; border-collapse: collapse; font-size: 13px; } .cal-hours th, .cal-hours td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); } .cal-hours th { font-size: 12px; color: var(--text-3); } .cal-detail-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; } .cal-detail-ico { font-size: 28px; line-height: 1; color: var(--ev, var(--text-2)); } .cal-detail h3 { margin: 0; font-size: var(--fs-card); } .cal-detail-when { color: var(--text-2); font-size: 13px; margin-top: 3px; } .cal-detail-desc { white-space: pre-wrap; line-height: 1.5; font-size: 13.5px; margin: 12px 0; } .cal-detail-meta { display: flex; flex-direction: column; gap: 7px; font-size: 13px; margin: 12px 0; } .cal-detail-meta .cal-role { font-size: 12px; } .cal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .cal-actions .btn-secondary { flex: none; } .cal-actions .danger { color: var(--accent); } .cal-log-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; } .cal-log-row select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 12.5px; } .cal-editor-form .cal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cal-editor-form .cal-form-row.three { grid-template-columns: 1fr 1fr 1fr; } .cal-check-row { display: flex; flex-wrap: wrap; gap: 6px 14px; } .cal-check-row label { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; color: var(--text); font-size: 13px; } .cal-check-row input { width: auto; margin: 0; } .cal-weekdays { display: flex; gap: 4px; flex-wrap: wrap; } .cal-weekdays label { flex-direction: row; gap: 5px; font-weight: 700; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; cursor: pointer; color: var(--text); } .cal-weekdays input { width: auto; margin: 0; } .cal-editor-form [data-for] { display: none; } .cal-editor-form [data-for].on { display: flex; } .cal-editor-form .cal-form-row[data-for].on { display: grid; } @media (max-width: 760px) { .cal-month, .cal-view-chips { display: none; } .cal-editor-form .cal-form-row, .cal-editor-form .cal-form-row.three { grid-template-columns: 1fr; } .cal-row { grid-template-columns: 64px 1fr; } .cal-row-badges { grid-column: 1 / -1; justify-content: flex-start; } } /* ---- roles (settings): master–detail + matrix ---- */ .roles-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .roles-title { font-weight: 800; font-size: var(--fs-panel); display: block; } .roles-sub { font-size: 12px; color: var(--text-3); } .roles-head-actions { display: flex; gap: 10px; align-items: center; } .roles-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; } .roles-layout[hidden], .roles-matrix[hidden] { display: none; } /* the display rules would otherwise beat the hidden attribute */ .roles-rail { display: flex; flex-direction: column; gap: 6px; max-height: 58vh; overflow-y: auto; padding-right: 2px; } .role-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; cursor: pointer; color: var(--text); font: inherit; } .role-row:hover { border-color: var(--text-3); } .role-row.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .role-row-swatch { width: 11px; height: 11px; border-radius: 50%; background: var(--rc, var(--text-3)); flex-shrink: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc, var(--text-3)) 28%, transparent); } .role-row-name { font-weight: 700; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .role-row-meta { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; } .roles-detail { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; max-height: 58vh; overflow-y: auto; min-width: 0; } .rd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .rd-name { flex: 1; min-width: 140px; font-size: 16px; font-weight: 800; background: none; border: 1px solid transparent; border-radius: var(--radius); padding: 6px 8px; color: var(--text); font-family: inherit; } .rd-name:hover:not(:disabled) { background: var(--surface-3); } .rd-name:focus { background: var(--surface); outline: none; border-color: var(--accent); } .rd-name:disabled { color: var(--text); } .rd-badge { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .rd-badge.system { background: var(--accent-soft); color: var(--accent); } .rd-preview { font-weight: 800; font-size: 13px; padding: 4px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; } .rd-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .rd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .rd-section-title { font-size: var(--fs-meta); font-weight: 800; color: var(--text-3); } .rd-appearance { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .rd-appearance-field { display: inline-flex; align-items: center; gap: 8px; } .rd-field-label { font-size: var(--fs-meta); font-weight: 700; color: var(--text-3); } .dc-linked-n { margin-right: 4px; } .rd-color { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); } .rd-color input[type="color"] { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; padding: 2px; cursor: pointer; } .rd-color-clear { background: none; border: 1px solid var(--border); color: var(--text-3); border-radius: var(--radius-sm); font-size: var(--fs-meta); padding: 2px 6px; cursor: pointer; } .rd-color-clear:hover { color: var(--text); border-color: var(--text-3); } .rd-effect { font-size: 12.5px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text); } .rd-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .rd-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } .rd-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .rd-group-name { font-weight: 800; font-size: 12.5px; } .rd-group-count { font-size: var(--fs-meta); color: var(--text-3); font-weight: 600; } .rd-group-tools { display: flex; gap: 4px; } .rd-group-tools button { font-size: var(--fs-meta); font-weight: 700; background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm); padding: 2px 7px; cursor: pointer; } .rd-group-tools button:hover { color: var(--text); border-color: var(--text-3); } .rd-perm { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; cursor: pointer; } .rd-perm input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; } .rd-perm-label { display: block; font-size: 12.5px; font-weight: 600; } .rd-perm-desc { display: none; font-size: var(--fs-meta); color: var(--text-3); margin-top: 1px; line-height: 1.35; } .rd-groups.show-desc .rd-perm-desc { display: block; } .rd-groups:not(.show-desc) .rd-perm { padding: 3px 0; align-items: center; } .rd-groups:not(.show-desc) .rd-perm input { margin-top: 0; } .rd-desc-toggle { margin-left: auto; margin-right: 10px; font-size: var(--fs-meta); font-weight: 700; background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap; } .rd-desc-toggle:hover { color: var(--text); border-color: var(--text-3); } .rd-perm:has(input:disabled) { opacity: .65; cursor: default; } .rd-members { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rd-member { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px 3px 9px; font-size: 12px; font-weight: 600; } .rd-member button { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 12px; padding: 0 3px; } .rd-member button:hover:not(:disabled) { color: var(--accent); } .rd-member button:disabled { opacity: .4; cursor: default; } .rd-add-member { font-size: 12px; padding: 5px 8px; border-radius: 999px; background: var(--surface); border: 1px dashed var(--border); color: var(--text-2); } .rd-discord select { font-size: 12.5px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text); } .rd-danger { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rd-danger .btn-secondary { flex: none; color: var(--accent); } .rd-danger .btn-secondary:disabled { opacity: .5; cursor: default; } .rd-new-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; } .rd-new-actions .btn-secondary { flex: none; padding: 8px 16px; } .roles-matrix { overflow: auto; max-height: 58vh; border: 1px solid var(--border); border-radius: var(--radius-sm); } .roles-matrix table { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; } .roles-matrix th, .roles-matrix td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; } .roles-matrix th:first-child, .roles-matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface-2); z-index: 1; } .roles-matrix thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 2; font-size: 12px; color: var(--text-3); } .roles-matrix thead th:first-child { z-index: 3; } .roles-matrix .mx-group td { font-size: 12px; font-weight: 800; color: var(--text-3); padding-top: 10px; text-align: left; } .mx-cell { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: none; cursor: pointer; color: transparent; font-size: 12px; line-height: 1; } .mx-cell:hover:not(:disabled) { border-color: var(--text-3); } .mx-cell.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .mx-cell:disabled { cursor: default; opacity: .75; } @media (max-width: 640px) { .roles-layout { grid-template-columns: 1fr; } .roles-rail { flex-direction: row; overflow-x: auto; max-height: none; } .role-row { width: auto; flex-shrink: 0; } } /* ---- team (settings): master–detail ---- */ .team-search { font-size: 12.5px; padding: 7px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); width: 150px; } .team-search:focus { outline: none; border-color: var(--accent); } .tm-row { align-items: center; } .tm-row-avatar.avatar, .tm-row .avatar { width: 28px; height: 28px; font-size: var(--fs-meta); flex-shrink: 0; } .tm-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; } .tm-row-sub { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-row-admin { color: var(--warn); font-size: 12px; flex-shrink: 0; } .tm-you { font-size: 12px; font-weight: 800; color: var(--accent); margin-left: 4px; } .tm-hero { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-3); background-size: cover; background-position: center; position: relative; overflow: hidden; } .tm-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15)); display: none; } .tm-hero.has-banner::before { display: block; } .tm-hero > * { position: relative; } .tm-hero-avatar.avatar, .tm-hero .avatar { width: 48px; height: 48px; font-size: 16px; border: 2px solid var(--surface); flex-shrink: 0; } .tm-hero.has-banner .avatar { border-color: rgba(255, 255, 255, 0.7); } .tm-hero-name { font-size: 17px; font-weight: 800; color: var(--text); } .tm-hero.has-banner .tm-hero-name { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .tm-hero-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .tm-bio { font-size: 12.5px; color: var(--text-2); margin: 10px 2px 0; line-height: 1.45; } .tm-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-2); margin-top: 10px; } .tm-facts b { color: var(--text-3); font-weight: 700; font-size: 12px; margin-right: 4px; } .tm-roles { display: flex; flex-wrap: wrap; gap: 6px; } .tm-role { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text-2); } .tm-role input { display: none; } .tm-role-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rc, var(--text-3)); opacity: .45; } .tm-role.on { color: var(--text); border-color: var(--rc, var(--accent)); background: color-mix(in srgb, var(--rc, var(--accent)) 14%, var(--surface)); } .tm-role.on .tm-role-dot { opacity: 1; } .tm-role:has(input:disabled) { opacity: .6; cursor: default; } .tm-note { font-size: var(--fs-meta); margin: 8px 0 0; } .tm-perm.tm-override .rd-perm-label { color: var(--accent); } .tm-ov-badge { font-size: 12px; font-weight: 800; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; } .tm-perm-actions { display: flex; justify-content: flex-end; margin-top: 10px; } .tm-perm-actions .btn-secondary { flex: none; } .tm-perm-actions .btn-secondary:disabled { opacity: .5; cursor: default; } .tm-password { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tm-password input { flex: 1; min-width: 200px; font-size: 12.5px; padding: 8px 11px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text); } .tm-password input:focus { outline: none; border-color: var(--accent); } .tm-password .btn-secondary { flex: none; } /* ---- invites ---- */ .inv-create { display: flex; gap: 8px; margin-bottom: 12px; } .inv-create input { flex: 1; min-width: 0; font-size: 12.5px; padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .inv-create input:focus { outline: none; border-color: var(--accent); } .inv-create .btn-secondary { flex: none; } .inv-fresh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; } .inv-fresh[hidden] { display: none; } .inv-fresh-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; font-weight: 800; letter-spacing: .08em; color: var(--accent); } .inv-fresh-text { flex: 1; min-width: 200px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; } .inv-fresh-actions { display: flex; gap: 6px; align-items: center; } .inv-fresh-actions .btn-secondary { flex: none; } .inv-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; } .inv-row { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; } .inv-row.used { opacity: .75; } .inv-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 800; letter-spacing: .06em; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; color: var(--text); cursor: pointer; flex-shrink: 0; } .inv-code:hover { border-color: var(--accent); color: var(--accent); } .inv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .inv-note { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-meta { font-size: var(--fs-meta); color: var(--text-3); } .inv-status { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } .inv-status.open { background: var(--good-soft); color: var(--good); } .inv-status.used { background: var(--surface-3); color: var(--text-2); } .inv-row .btn-secondary { flex: none; } /* ---- activity ---- */ .act-chips { margin-bottom: 10px; } .act-cat-select { padding: 7px 30px 7px 11px; font-size: 12.5px; border-radius: 999px; background: var(--surface); max-width: 200px; } .act-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; padding-right: 2px; } .act-day { font-size: 12px; font-weight: 800; color: var(--text-3); padding: 10px 2px 4px; position: sticky; top: 0; background: var(--surface); z-index: 1; } .act-day:first-child { padding-top: 2px; } .act-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 12.5px; } .act-ico { font-size: 13px; text-align: center; color: var(--text-2); display: inline-flex; } .act-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .act-text b { color: var(--text); } .act-summary { color: var(--text-3); } .act-time { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; } .act-row.action-login_failed { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .act-row.action-login_failed .act-text, .act-row.action-login_failed .act-summary { color: var(--warn); } .act-row.action-user_removed, .act-row.action-role_deleted, .act-row.action-password_reset { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } /* ---- console ---- */ .con-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; font-size: 12px; color: var(--text-2); } .con-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; } .con-toggle input { accent-color: var(--accent); margin: 0; } .con-count { color: var(--text-3); font-variant-numeric: tabular-nums; } .con-spacer { flex: 1; } .con-bar .btn-secondary { flex: none; } .con-body { font-size: var(--fs-meta); line-height: 1.55; height: 52vh; } .con-body .console-log-line { align-items: baseline; padding: 1px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); } .con-level { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; margin-right: 2px; opacity: .5; } .con-level-error { background: var(--bad); opacity: 1; box-shadow: 0 0 6px rgba(255, 107, 127, .6); } .con-level-warn { background: var(--warn); opacity: 1; } .con-tag { font-size: 12px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); flex-shrink: 0; } .con-tag-whatnot { background: rgba(255, 213, 0, .18); color: #d1a300; } .con-tag-tiktok { background: rgba(254, 44, 85, .16); color: #fe2c55; } .con-tag-discord { background: rgba(88, 101, 242, .18); color: #7b86ff; } .con-text { min-width: 0; } /* ---- settings popup shell + account tab ---- */ .modal-settings { max-width: 980px; max-height: none; overflow: hidden; } /* the shell never scrolls; only .settings-content does */ .settings-layout { grid-template-columns: 210px 1fr; height: auto; min-height: 540px; max-height: min(760px, 85vh); } .settings-nav { padding: 14px 10px 12px; } .settings-me { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); min-width: 0; } .settings-me-avatar.avatar { width: 34px; height: 34px; font-size: 12px; flex-shrink: 0; } .settings-me-text { min-width: 0; } .settings-me-name { font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-me-role { font-size: 12px; color: var(--text-3); font-weight: 800; margin-top: 1px; } .settings-nav-label { margin-top: 10px; } .settings-nav-label[hidden] { display: none; } .settings-content { padding: 24px 26px 26px; } .acct-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); background-size: cover; background-position: center; padding: 22px 22px 18px; margin-bottom: 16px; } .acct-hero-shade { display: none; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.62)); pointer-events: none; } .acct-hero.has-banner .acct-hero-shade { display: block; } .acct-hero-row { position: relative; } .acct-hero-avatar { border: 3px solid var(--surface); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } .acct-hero.has-banner .acct-hero-avatar { border-color: rgba(255, 255, 255, 0.85); } .acct-hero.has-banner .settings-account-name { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .acct-hero-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px; font-size: 12px; color: var(--text-2); } .acct-hero.has-banner .acct-hero-facts { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .acct-hero-facts b { font-weight: 800; font-size: 12px; opacity: .8; margin-right: 5px; } .acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .acct-card { margin-bottom: 0; } .acct-card-wide { grid-column: 1 / -1; } .acct-card .settings-card-head { align-items: baseline; gap: 12px; flex-wrap: wrap; } .acct-card-hint { font-size: var(--fs-meta); color: var(--text-3); font-weight: 500; } .acct-photo-row { display: flex; align-items: center; gap: 14px; } .acct-profile-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.6fr); gap: 20px 28px; align-items: start; } .acct-profile-col { min-width: 0; } .acct-field-label { font-size: var(--fs-meta); font-weight: 700; color: var(--text-2); margin-bottom: 8px; } .acct-field-hint { font-size: var(--fs-meta); color: var(--text-3); margin-top: 8px; } .acct-section-label { grid-column: 1 / -1; font-size: var(--fs-meta); font-weight: 700; color: var(--text-3); padding-top: 14px; margin-bottom: -4px; border-top: 1px solid var(--border); } .acct-card:not(.acct-card-wide) .acct-pw-form { grid-template-columns: 1fr; } .acct-pw-form > button { grid-column: 1 / -1; justify-self: end; } .acct-photo-preview.avatar { width: 56px; height: 56px; font-size: 18px; flex-shrink: 0; } .acct-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; } .acct-photo-actions .btn-secondary { flex: none; } .acct-pw-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; } .acct-pw-form .auth-field { margin: 0; min-width: 0; } .acct-pw-form .auth-submit { grid-column: 1 / -1; justify-self: end; width: auto; padding: 9px 18px; white-space: nowrap; } .acct-pw-form .auth-hint { display: none; } @media (max-width: 860px) { .acct-grid, .acct-pw-form, .acct-profile-row { grid-template-columns: 1fr; } .acct-card-wide { grid-column: auto; } } @media (max-width: 700px) { /* Phone: a real header row (pane name + close), then the tab strip on its own row, then the pane. */ .modal-settings { display: flex; flex-direction: column; max-height: 90vh; } .modal-settings > .modal-close { display: none; } .settings-phone-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .settings-phone-title { font-size: var(--fs-panel); font-weight: 800; letter-spacing: -0.01em; } .settings-phone-close { position: static; flex-shrink: 0; } .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: auto; max-height: none; flex: 1; min-height: 0; } .settings-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 8px 10px; border-right: none; border-bottom: 1px solid var(--border); scrollbar-width: none; } .settings-nav::-webkit-scrollbar { display: none; } .settings-me, .settings-nav-label, .settings-nav-spacer { display: none; } .settings-nav-btn { flex: none; } .settings-content { overflow-y: auto; min-height: 0; } } /* ---------- TikTok Shop integration (Settings → Integrations) ---------- */ .tts-body { display: flex; flex-direction: column; gap: 14px; } .tts-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); } .tts-status-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1; } .tts-status-text { min-width: 0; } .tts-dot { width: 12px; height: 12px; border-radius: 999px; margin-top: 4px; flex-shrink: 0; background: var(--text-3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-3) 18%, transparent); } .tts-status.tone-ok .tts-dot { background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); } .tts-status.tone-ready .tts-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .tts-status.tone-warn .tts-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); } .tts-status.tone-bad .tts-dot { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); } .tts-status-title { font-weight: 800; font-size: var(--fs-panel); } .tts-status-sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.45; } .tts-status-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .tts-connect.auth-submit, .tts-save.auth-submit { margin: 0; padding: 9px 16px; } .tts-lasttest { font-size: 12px; margin-top: 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); line-height: 1.5; } .tts-lasttest.ok { color: var(--good); } .tts-lasttest-hint { color: var(--text-2); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); } .tts-lasttest.bad { color: var(--bad); } .tts-muted { font-size: 12px; color: var(--text-3); line-height: 1.5; } .tts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tts-card { margin: 0; min-width: 0; } .tts-card-wide { grid-column: 1 / -1; } .tts-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .tts-field-wide { grid-column: 1 / -1; } .tts-select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; font-weight: 400; outline: none; } .tts-select:focus { border-color: var(--accent); } .tts-form-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .tts-updated { flex: 1; text-align: right; } .tts-danger { color: var(--bad); } .tts-danger:hover { background: var(--bad-soft); } .tts-shops { display: flex; flex-direction: column; gap: 8px; } .tts-shop { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; } .tts-shop:hover { border-color: var(--text-3); } .tts-shop.active { border-color: var(--accent); background: var(--accent-soft); } .tts-shop input { accent-color: var(--accent); margin: 0; } .tts-shop-main { display: flex; flex-direction: column; min-width: 0; } .tts-shop-name { font-weight: 700; font-size: 13px; } .tts-shop-meta { font-size: var(--fs-meta); color: var(--text-3); } .tts-cipher { margin-top: 10px; } .tts-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin-bottom: 10px; } .tts-url-label { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--text-3); } .tts-url code { font-size: var(--fs-meta); padding: 7px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); overflow-wrap: anywhere; color: var(--text); } .tts-events { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; } .tts-event { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface); font-size: 12.5px; } .tts-event-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--good); flex-shrink: 0; } .tts-event-dot.bad { background: var(--bad); } .tts-event-label { font-weight: 700; } .tts-event-meta { margin-left: auto; color: var(--text-3); font-size: var(--fs-meta); white-space: nowrap; } .tts-guide summary { cursor: pointer; font-weight: 800; font-size: 13.5px; list-style: none; display: flex; align-items: center; gap: 8px; } .tts-guide summary::before { content: '▸'; color: var(--text-3); font-size: 12px; } .tts-guide[open] summary::before { content: '▾'; } .tts-guide summary::-webkit-details-marker { display: none; } .tts-guide ol { margin: 12px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; display: flex; flex-direction: column; gap: 5px; } .tts-guide code { font-size: var(--fs-meta); background: var(--surface); padding: 1px 5px; border-radius: var(--radius-sm); } @media (max-width: 720px) { .tts-grid, .tts-fields { grid-template-columns: 1fr; } .tts-status { flex-direction: column; align-items: stretch; } } /* ---------- Orders / packing queue ---------- */ body:not(.perm-orders-view) .nav-item[data-tab="orders"] { display: none; } .pq-tools { display: flex; gap: 8px; align-items: center; } .pq-tools .team-search { width: 240px; max-width: 60vw; } .pq-chip-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: var(--fs-meta); font-weight: 800; text-align: center; } .chip.active .pq-chip-n { background: rgba(255, 255, 255, 0.25); color: inherit; } .pq-syncinfo { font-size: 12px; color: var(--text-3); margin-bottom: 14px; min-height: 16px; } .pq-sync-err { color: var(--bad); } .pq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; } .pq-empty { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; } .pq-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; border-left: 4px solid var(--border); } .pq-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--text-3); } .pq-card.dl-soon { border-left-color: var(--warn); } .pq-card.dl-urgent, .pq-card.dl-late { border-left-color: var(--bad); } .pq-card.is-packed { border-left-color: var(--good); } .pq-card.bucket-hold { border-left-color: var(--text-3); opacity: .9; } .pq-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pq-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; font-size: 13.5px; letter-spacing: .02em; } .pq-age { margin-left: auto; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; } .pq-status { background: var(--surface-3); color: var(--text-2); } .pq-s-AWAITING_SHIPMENT, .pq-s-PARTIALLY_SHIPPING { background: var(--accent-soft); color: var(--accent); } .pq-s-AWAITING_COLLECTION { background: var(--warn-soft); color: var(--warn); } .pq-s-IN_TRANSIT, .pq-s-DELIVERED, .pq-s-COMPLETED { background: var(--good-soft); color: var(--good); } .pq-s-CANCELLED { background: var(--bad-soft); color: var(--bad); } .pq-tag { font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); } .pq-tag-bad { background: var(--bad-soft); color: var(--bad); } .pq-tag-warn { background: var(--warn-soft); color: var(--warn); } .pq-tag-info { background: var(--accent-soft); color: var(--accent); } .pq-deadline { font-size: 12.5px; color: var(--text-2); } .pq-deadline.tone-soon { color: var(--warn); } .pq-deadline.tone-done { color: var(--good); } .pq-card.bucket-shipped { border-left-color: var(--good); opacity: .92; } .pq-card.bucket-cancelled { border-left-color: var(--bad); opacity: .8; } .pq-deadline.tone-urgent, .pq-deadline.tone-late { color: var(--bad); } .pq-buyer { font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; } .pq-buyer-name { font-weight: 700; } .pq-muted { color: var(--text-3); font-size: 12px; } .pq-items { display: flex; flex-direction: column; gap: 6px; } .pq-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); } .pq-item.is-checked { opacity: .55; } .pq-item.is-checked .pq-item-name { text-decoration: line-through; } .pq-check { display: flex; align-items: center; } .pq-check input { width: 18px; height: 18px; accent-color: var(--good); cursor: pointer; } .pq-thumb { width: 40px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-3); } .pq-thumb-empty { display: block; } .pq-item-main { min-width: 0; flex: 1; } .pq-item-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pq-item-sub { font-size: var(--fs-meta); color: var(--text-3); margin-top: 2px; } .pq-stock-ok { color: var(--good); } .pq-stock-out { color: var(--bad); font-weight: 700; } .pq-qty { font-weight: 800; font-size: 14px; flex-shrink: 0; } .pq-msg { font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius); background: var(--accent-soft); color: var(--text); line-height: 1.45; white-space: pre-wrap; } .pq-msg-plain { background: var(--surface); border: 1px solid var(--border); } .pq-note-line { font-size: 12px; color: var(--text-2); } .pq-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .pq-units { font-size: 12px; color: var(--text-3); } .pq-spacer { flex: 1; } .pq-pack-btn { background: var(--accent-solid); color: #fff; border: none; font-weight: 800; font-size: 12.5px; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; } .pq-pack-btn:hover { filter: brightness(1.08); } .pq-pack-btn:disabled { opacity: .55; cursor: default; } .pq-packed-by { font-size: 12px; color: var(--good); font-weight: 700; } /* detail sheet */ .pq-modal { max-width: 900px; } .pq-d-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding-right: 30px; } .pq-d-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .pq-d-id { font-size: 20px; font-weight: 800; } .pq-copy { background: none; border: 1px dashed var(--border); color: var(--text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-meta); padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; } .pq-copy:hover { color: var(--text); border-color: var(--text-3); } .pq-d-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; } .pq-alert { font-size: 12.5px; padding: 9px 12px; border-radius: var(--radius); background: var(--bad-soft); color: var(--bad); border: 1px solid rgba(255, 107, 127, 0.3); line-height: 1.45; } .pq-alert-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .pq-d-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; } .pq-d-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .pq-d-h { font-size: 12px; font-weight: 800; color: var(--text-3); margin: 8px 0 2px; display: flex; align-items: center; gap: 10px; } .pq-d-h:first-child { margin-top: 0; } .pq-items-detail .pq-thumb { width: 48px; height: 68px; } .pq-address { margin: 0; font: inherit; font-size: 14px; line-height: 1.5; white-space: pre-wrap; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); } .pq-kv { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; } .pq-kv > div { display: grid; grid-template-columns: 80px 1fr; gap: 8px; } .pq-label-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .pq-label-hint { font-size: var(--fs-meta); } .pq-note { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; font-size: 12.5px; resize: vertical; } .pq-note:focus { outline: none; border-color: var(--accent); } .pq-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pq-d-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .pq-link { text-decoration: none; display: inline-flex; align-items: center; } @media (max-width: 720px) { .pq-list { grid-template-columns: 1fr; } .pq-d-grid { grid-template-columns: 1fr; } .pq-tools { width: 100%; } .pq-tools .team-search { flex: 1; max-width: none; } .pq-kv > div { grid-template-columns: 70px 1fr; } } /* ---------- Analytics (TikTok Shop) ---------- */ body:not(.perm-analytics-view) .nav-item[data-tab="analytics"] { display: none; } .an-err { color: var(--warn); } .an-body { display: flex; flex-direction: column; gap: 16px; } .an-kpi { cursor: default; } .an-kpi:hover { transform: none; box-shadow: none; border-color: var(--border); } .an-kpi-accent .hc-value { color: var(--accent); } .an-delta { font-weight: 800; font-size: var(--fs-meta); color: var(--text-3); } .an-delta.up { color: var(--good); } .an-delta.down { color: var(--bad); } .an-tk { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; } .an-tk-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 800; color: var(--text-3); margin-bottom: 10px; } .an-tk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 16px; } .an-tk-grid > div { display: flex; flex-direction: column; } .an-tk-grid b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .an-tk-grid span { font-size: var(--fs-meta); color: var(--text-3); } .an-src { display: flex; gap: 3px; margin-top: 12px; height: 26px; border-radius: var(--radius); overflow: hidden; } .an-src-seg { display: flex; align-items: center; gap: 5px; padding: 0 10px; font-size: var(--fs-meta); color: #fff; background: var(--accent); min-width: 0; white-space: nowrap; overflow: hidden; } .an-src-seg:nth-child(2) { background: color-mix(in srgb, var(--accent) 60%, var(--surface-3)); } .an-src-seg:nth-child(3) { background: var(--surface-3); color: var(--text); } .an-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; min-width: 0; } .an-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .an-card-head h3 { margin: 0; font-size: var(--fs-card); font-weight: 800; } .an-card-head-2 { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .an-muted { font-size: 12px; color: var(--text-3); line-height: 1.5; } .an-pad { padding: 6px 0; } .an-pad-top { margin-top: 12px; } .an-chart { display: flex; align-items: flex-end; gap: 4px; height: 176px; padding: 0 2px; } .an-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; } .an-col-val { font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity .12s; } .an-col:hover .an-col-val { opacity: 1; } .an-bar { width: 100%; max-width: 38px; background: var(--surface-3); border-radius: 5px 5px 2px 2px; } .an-bar.has-data { background: var(--data); } .an-col:hover .an-bar.has-data { filter: brightness(1.15); } .an-col-label { font-size: var(--fs-meta); color: var(--text-3); font-weight: 700; height: 14px; white-space: nowrap; } .an-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; } .an-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .an-heat { padding: 0; } .an-heat .cad-hm-cell { font-size: var(--fs-micro); font-weight: 700; color: var(--text); } .an-row { margin-bottom: 10px; } .an-row-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; } .an-row-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .an-row-val { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .an-row-bar { height: 6px; border-radius: 999px; background: var(--surface-3); margin-top: 5px; overflow: hidden; } .an-row-bar i { display: block; height: 100%; background: var(--data); border-radius: 999px; } .an-row-sub { font-size: var(--fs-meta); color: var(--text-3); margin-top: 3px; } .an-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .an-facts > div { display: flex; flex-direction: column; } .an-facts b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .an-facts span { font-size: var(--fs-meta); color: var(--text-3); } .an-status-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .an-buyers { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .an-buyer { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--border); } .an-buyer-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .an-buyer-name i { font-style: normal; color: var(--text-3); } .an-buyer b { font-variant-numeric: tabular-nums; } .an-table-wrap { border-radius: var(--radius-sm); } .an-table { min-width: 1100px; font-size: 12.5px; } .an-table th { font-size: 12px; color: var(--text-3); } .an-table td, .an-table th { padding: 9px 10px; } .an-live-title { font-weight: 700; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .an-two, .an-three { grid-template-columns: 1fr; } } @media (max-width: 640px) { .an-chart { height: 140px; } .an-facts { grid-template-columns: 1fr 1fr; } } /* ---------- Ship day + requests (Orders tab) ---------- */ .pq-shipbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); } .pq-shipbar[hidden] { display: none; } .pq-shipbar-all { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .pq-shipbar-all input { width: 16px; height: 16px; accent-color: var(--accent); } .pq-handover { padding: 6px 10px; font-size: 12px; } .pq-sel { display: flex; align-items: center; } .pq-sel input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 0; } .pq-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); } .pq-dialog { max-width: 640px; } .pq-dialog h3 { margin: 0 0 6px; font-size: var(--fs-card); } .pq-dialog .pq-muted { margin-bottom: 12px; } .pq-dlg-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 50vh; overflow-y: auto; } .pq-dlg-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; } .pq-dlg-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); } .pq-dlg-row .pq-muted { margin: 0; } .pq-dlg-ok { color: var(--good); } .pq-dlg-bad { color: var(--bad); } .pq-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .pq-dlg-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-top: 10px; } .pq-dlg-field select, .pq-dlg-field input, .pq-dlg-field textarea { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: var(--radius-sm); font: inherit; font-size: 13px; font-weight: 400; } .pq-req { background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .pq-req.kind-return { border-left-color: var(--accent); } .pq-req.is-done { border-left-color: var(--border); opacity: .85; } .pq-req-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pq-req-title { font-weight: 800; font-size: var(--fs-panel); } .pq-req-reason { font-size: 13px; padding: 8px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); } .pq-req-items { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); } .pq-req-deadline { font-size: 12px; color: var(--warn); font-weight: 700; } .pq-req-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .pq-req-actions select { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 7px 10px; border-radius: var(--radius-sm); font: inherit; font-size: 12.5px; } /* ---------- Supplies ---------- */ body:not(.perm-inventory-view) .nav-item[data-tab="supplies"] { display: none; } .sup-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .sup-facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); } .sup-facts b { color: var(--text); } .sup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .sup-card { background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--good); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .sup-card.st-low { border-left-color: var(--warn); } .sup-card.st-out { border-left-color: var(--bad); } .sup-head { display: flex; align-items: center; gap: 8px; } .sup-name { font-weight: 800; font-size: 14px; flex: 1; min-width: 0; } .sup-qty { display: flex; align-items: baseline; gap: 6px; } .sup-qty b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; } .sup-qty span { font-size: 12px; color: var(--text-3); } .sup-meta { font-size: 12px; color: var(--text-3); line-height: 1.5; } .sup-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .sup-actions .btn-secondary { padding: 6px 10px; } .sup-adjust { display: flex; gap: 6px; align-items: center; } .sup-adjust input { width: 76px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: var(--radius-sm); font: inherit; font-size: 12.5px; } .sup-pill { font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--good-soft); color: var(--good); } .sup-pill.st-low { background: var(--warn-soft); color: var(--warn); } .sup-pill.st-out { background: var(--bad-soft); color: var(--bad); } .sup-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .sup-form .pq-dlg-field { margin-top: 0; } .sup-form .wide { grid-column: 1 / -1; } .sup-history { font-size: var(--fs-meta); color: var(--text-3); display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .po-table { min-width: 720px; font-size: 12.5px; } .po-table th { font-size: 12px; color: var(--text-3); } .po-table td, .po-table th { padding: 9px 10px; } .po-pos { color: var(--good); } .po-neg { color: var(--bad); } /* ---------- Auto pay (Pay tab) ---------- */ .ap-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 18px; } .ap-panel[hidden] { display: none; } .ap-st { font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); } .ap-st.ready { background: var(--accent-soft); color: var(--accent); } .ap-st.logged { background: var(--good-soft); color: var(--good); } .ap-st.warn { background: var(--warn-soft); color: var(--warn); } .hours-auto { font-size: 12px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin-left: 6px; vertical-align: middle; } /* ---------- Alerts settings ---------- */ .al-rules { display: flex; flex-direction: column; gap: 8px; } .al-rule { display: flex; align-items: flex-start; gap: 12px; padding: 9px 11px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); } .al-rule input { width: 18px; height: 18px; accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; } .al-rule b { display: block; font-size: 13px; } .al-rule span { font-size: 12px; color: var(--text-3); } .al-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .al-feed { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; } .al-feed-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border-radius: var(--radius); background: var(--surface); font-size: 12.5px; line-height: 1.4; } .al-feed-row .an-muted { margin-left: auto; white-space: nowrap; } @media (max-width: 720px) { .ap-grid, .sup-form, .al-nums { grid-template-columns: 1fr; } } .hm-tile { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 13px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .hm-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; } .hm-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--text-3); } .hm-tile.tone-accent::before { background: var(--accent); } .hm-tile.tone-warn::before { background: var(--warn); } .hm-tile.tone-bad::before { background: var(--bad); } .hm-tile.tone-good::before { background: var(--good); } .hm-tile.tone-accent .hm-tile-value { color: var(--accent); } .hm-tile.tone-warn .hm-tile-value { color: var(--warn); } .hm-tile.tone-bad .hm-tile-value { color: var(--bad); } .hm-tile.tone-good .hm-tile-value { color: var(--good); } .hm-tile-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--text-3); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-tile-ico { font-size: 13px; } .hm-tile-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .hm-tile-sub { font-size: var(--fs-meta); color: var(--text-2); margin-top: 6px; line-height: 1.35; min-height: 15px; } .hm-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px; border-radius: var(--radius); cursor: pointer; } .hm-row:hover { background: var(--surface-2); } .hm-row.sev-0 .hm-row-text { color: var(--bad); } .hm-row.sev-1 .hm-row-text { color: var(--text); } .hm-row.sev-2 .hm-row-text { color: var(--text-2); font-weight: 600; } .hm-bars { display: flex; align-items: flex-end; gap: 6px; height: 88px; } .hm-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; } .hm-bar { width: 100%; max-width: 30px; background: var(--surface-3); border-radius: 4px 4px 2px 2px; } .hm-bar.has-data { background: var(--data); } .hm-bar-col span { font-size: var(--fs-micro); color: var(--text-3); font-weight: 700; } @media (max-width: 900px) { } @media (max-width: 560px) { .hm-tile-value { font-size: 22px; } } .hm-min .home-action { background: transparent; border-color: var(--border); padding: 8px 14px; font-weight: 700; } .hm-min .home-live-strip { margin-bottom: 22px; } .hm-stat.tone-warn .hm-stat-value { color: var(--warn); } .hm-stat.tone-bad .hm-stat-value { color: var(--bad); } @media (max-width: 640px) { } /* ---------- Home, minimal — the pretty pass ---------- */ :root { --hm-display: "Fraunces", "Iowan Old Style", Georgia, serif; } .hm-min::before { content: ''; position: absolute; left: -120px; top: -140px; width: 520px; height: 420px; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, var(--accent-soft), transparent 70%); opacity: .8; filter: blur(18px); } .hm-min .hm-hero-text .muted { font-size: var(--fs-meta); font-weight: 700; color: var(--text-3); margin-top: 8px; } .hm-min .home-pulse .hp-live { position: relative; padding-left: 14px; } .hm-min .home-pulse .hp-live::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-soft); animation: hmPing 1.8s ease-out infinite; } @keyframes hmPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } } .hm-min .home-actions { gap: 8px; } .hm-min .home-action { background: transparent; border: 1px solid var(--border); color: var(--text-2); font-weight: 700; letter-spacing: .01em; padding: 9px 16px; transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; } .hm-min .home-action:hover { background: var(--text); color: var(--bg); border-color: var(--text); transform: translateY(-1px); } .hm-min .home-live-strip { margin-bottom: 26px; gap: 12px; } .hm-min .home-live-card { border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); border-radius: var(--radius); padding: 11px 16px 11px 12px; box-shadow: 0 8px 24px -18px color-mix(in srgb, var(--accent) 60%, transparent); } .hm-min .home-live-card .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); } .hm-stats::before, .hm-stats::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--accent) 0, color-mix(in srgb, var(--accent) 35%, var(--border)) 28%, var(--border) 60%, transparent); } .hm-stats::before { top: 0; } .hm-stats::after { bottom: 0; opacity: .7; } .hm-spark i.on { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); } .hm-section-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .hm-clear::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); } .hm-line::after { content: '→'; position: absolute; right: 4px; top: 50%; transform: translate(-6px, -50%); opacity: 0; color: var(--accent); font-size: 14px; transition: transform .18s ease, opacity .18s ease; } .hm-line:hover::after { opacity: 1; transform: translate(0, -50%); } @keyframes hmRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { } @media (max-width: 640px) { } /* Light grounds need darker status and data colours; the dark defaults fall to ~2:1 on white. */ :root[data-theme="light"], :root[data-theme="paper"], :root[data-theme="sky"], :root[data-theme="candy"], :root[data-theme="mint"], :root[data-theme="comiwalls"] { --good: #1a8a4f; --good-strong: #157a44; --warn: #b7791f; --bad: #d92d3a; --bad-strong: #c4212e; --info: #2f6fd6; --data: #2f6fd6; --data-soft: rgba(47, 111, 214, 0.16); --accent-text: var(--accent); } :root[data-theme="light"] { --accent-text: #d61b45; } :root[data-theme="mint"] { --accent-text: #0b7d57; } /* Inline icon set (see ICON in app.js). 1em square, inherits colour, sits on the text baseline. */ .ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ic-lg { width: 1.4em; height: 1.4em; vertical-align: -0.3em; } .ic-xl { width: 1em; height: 1em; } /* Keyboard focus: one ring for every interactive thing. Later than every outline:none above, same or higher specificity. */ :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- First-run tour: a veil, a spotlight that glides between targets, one card ---------- */ .tour-veil { position: fixed; inset: 0; z-index: 60; } .tour-spot { position: fixed; z-index: 61; border-radius: var(--radius); pointer-events: none; box-shadow: 0 0 0 9999px var(--overlay), 0 0 0 2px var(--accent); animation: tourFade .3s ease; transition: left .42s cubic-bezier(.2, .8, .2, 1), top .42s cubic-bezier(.2, .8, .2, 1), width .42s cubic-bezier(.2, .8, .2, 1), height .42s cubic-bezier(.2, .8, .2, 1), border-radius .3s ease; } .tour-spot.is-empty { box-shadow: 0 0 0 9999px var(--overlay); border-radius: 0; } .tour-spot::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; } .tour-spot.is-fresh:not(.is-empty)::after { animation: tourPulse 1.3s ease-out 2; } @keyframes tourFade { from { opacity: 0; } to { opacity: 1; } } @keyframes tourPulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } to { box-shadow: 0 0 0 16px transparent; } } .tour-card { position: fixed; z-index: 62; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px 16px; box-shadow: var(--shadow-lg); width: 350px; max-width: calc(100vw - 24px); animation: scaleIn .22s ease; transition: left .42s cubic-bezier(.2, .8, .2, 1), top .42s cubic-bezier(.2, .8, .2, 1), width .25s ease, padding .25s ease; } .tour-card.is-big { padding: 22px 26px 20px; } .tour-card.is-big .tour-title { font-size: 22px; } .tour-card.is-big .tour-body { font-size: 14.5px; } .tour-card.is-busy .tour-inner { opacity: .35; } .tour-progress { height: 3px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-bottom: 12px; } .tour-progress i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .42s cubic-bezier(.2, .8, .2, 1); } .tour-inner { animation: tourIn .32s cubic-bezier(.2, .8, .2, 1); transition: opacity .15s ease; } @keyframes tourIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tour-step { font-size: var(--fs-meta); font-weight: 700; color: var(--text-3); } .tour-title { margin: 4px 0 6px; font-size: var(--fs-card); font-weight: 800; letter-spacing: -0.01em; } .tour-body { margin: 0; font-size: var(--fs-body); color: var(--text-2); line-height: 1.5; } .tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .tour-spacer { flex: 1; } .tour-skip { background: none; border: none; color: var(--text-3); font-weight: 700; font-size: var(--fs-meta); cursor: pointer; padding: 6px 0; } .tour-skip:hover { color: var(--text); } @media (prefers-reduced-motion: reduce) { .tour-card, .tour-inner, .tour-spot, .tour-spot::after { animation: none; transition: none; } .tour-progress i { transition: none; } } /* Finale after the last step */ .tour-finale { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; cursor: pointer; background: radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--accent) 9%, var(--bg)), var(--bg) 70%); animation: tourFade .3s ease; } .tour-finale.is-out { animation: tfOut .5s ease forwards; pointer-events: none; } @keyframes tfOut { to { opacity: 0; transform: scale(1.02); } } .tf-inner { text-align: center; padding: 24px; max-width: 90vw; } .tf-title { font-size: clamp(34px, 7vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; display: flex; flex-wrap: wrap; justify-content: center; } .tf-ch { display: inline-block; opacity: 0; transform: translateY(28px); filter: blur(6px); animation: tfRise .55s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.25s + var(--i) * 38ms); } @keyframes tfRise { to { opacity: 1; transform: none; filter: blur(0); } } .tf-rule { width: 64px; height: 4px; border-radius: 999px; background: var(--accent); margin: 22px auto 0; transform: scaleX(0); animation: tfRule .5s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: 1.15s; } @keyframes tfRule { to { transform: scaleX(1); } } .tf-sub { margin-top: 14px; font-size: var(--fs-panel); color: var(--text-2); opacity: 0; animation: tfFadeUp .5s ease forwards; animation-delay: 1.4s; } @keyframes tfFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tf-ch, .tf-rule, .tf-sub { animation: none; opacity: 1; transform: none; filter: none; } .tour-finale, .tour-finale.is-out { animation: none; } .tour-finale.is-out { opacity: 0; } } /* ---------- Home, card layout (Seller Center rhythm, our components) ---------- */ .hm2 { max-width: 1120px; } .hm2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .hm2-head h2 { margin: 0; font-size: var(--fs-page); font-weight: 800; letter-spacing: -0.02em; font-family: var(--font); } .hm2-sub { margin: 6px 0 0; font-size: 13px; color: var(--text-2); } .hm2 .home-action { background: var(--surface); } .hm2 .home-live-strip { margin-bottom: 18px; } .hm2-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 16px; } .hm2-card-slim { padding: 18px 24px; cursor: pointer; } .hm2-card-slim:hover { border-color: var(--text-3); } .hm2-title { margin: 0 0 16px; font-size: var(--fs-card); font-weight: 800; letter-spacing: -0.01em; } .hm2-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .hm2-title-row .hm2-title { margin-bottom: 14px; } .hm2-link { font-size: 12.5px; font-weight: 700; color: var(--accent-text); text-decoration: none; } .hm2-link:hover { text-decoration: underline; } .hm2-row { display: grid; grid-template-columns: 1fr; gap: 14px; } .hm2-row:has(.hm2-panel-side) { grid-template-columns: minmax(0, 1fr) 260px; } .hm2-row:has(> .hm2-panel:nth-child(2)):not(:has(.hm2-panel-side)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm2-panel { background: var(--surface-2); border-radius: var(--radius); padding: 18px 20px; min-width: 0; } .hm2-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .hm2-chips .chip { font-size: 12px; } .hm2-updated { font-size: 12px; color: var(--text-3); } .hm2-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 20px; } .hm2-metrics-todo { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .hm2-metric { cursor: pointer; min-width: 0; border-radius: var(--radius); padding: 4px 6px; margin: -4px -6px; transition: background .12s ease; } .hm2-metric:hover { background: color-mix(in srgb, var(--surface-3) 70%, transparent); } .hm2-metric-label { font-size: 13px; color: var(--text-2); font-weight: 600; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm2-chev { color: var(--text-3); font-size: 15px; line-height: 1; } .hm2-metric-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.1; } .hm2-metric-sub { font-size: 12.5px; color: var(--text-3); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm2-metric-sub.tone-bad { color: var(--bad); } .hm2-metric-sub.tone-warn { color: var(--warn); } .hm2-metric-sub.tone-accent { color: var(--accent-text); } .hm2-panel-side .hm2-side-title { font-size: var(--fs-panel); font-weight: 800; } .hm2-side-sub { font-size: 12px; color: var(--text-3); margin: 4px 0 14px; } .hm2-side-rows { display: flex; flex-direction: column; gap: 9px; } .hm2-side-rows > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-2); } .hm2-side-rows b { color: var(--text); font-variant-numeric: tabular-nums; } .hm2-insight { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--text); } .hm2-insight b { font-weight: 800; } .hm2-clear { color: var(--text-3); } .hm2-card-clear .hm2-title { margin-bottom: 6px; } .hm2-card-clear .hm2-insight { margin-top: 0; } .hm2-spark { color: var(--accent); font-size: 15px; line-height: 1.5; flex-shrink: 0; } .hm2-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .hm2-event { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; border-left: 4px solid var(--ev, var(--accent)); cursor: pointer; } .hm2-event:hover { background: var(--surface-3); } .hm2-event-label { font-size: 12px; font-weight: 800; color: var(--text-3); } .hm2-event-title { font-size: var(--fs-panel); font-weight: 800; margin-top: 4px; } .hm2-event-when { font-size: 12.5px; color: var(--text-2); margin-top: 3px; } .hm2-event-roles { margin-top: 8px; } .hm2 .hm2-panel .home-hot-row { padding: 9px 0; } .hm2-new { display: flex; flex-direction: column; gap: 3px; } .hm2-new b { font-size: 14px; } .hm2-new span { font-size: 12px; color: var(--text-3); } @media (max-width: 860px) { .hm2-row:has(.hm2-panel-side), .hm2-row:has(> .hm2-panel:nth-child(2)):not(:has(.hm2-panel-side)) { grid-template-columns: 1fr; } .hm2-card { padding: 18px 18px; border-radius: var(--radius-lg); } .hm2-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm2-metric-value { font-size: 22px; } } @media (min-width: 1000px) { .hm2-panel-main .hm2-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---------- Changelog ---------- */ .cl2 { max-width: 880px; } .cl2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .cl2-head h2 { margin: 0 0 4px; font-size: var(--fs-page); } .cl2-tools { display: flex; gap: 8px; align-items: center; } .cl2-tools .team-search { width: 240px; max-width: 60vw; } .cl2-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .cl2-newpill { font-size: var(--fs-meta); font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .cl2-compose { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; } .cl2-compose[hidden] { display: none; } .cl2-compose-row { display: grid; grid-template-columns: 1fr 150px; gap: 10px; } .cl2-title-input { width: 100%; } .cl2-compose-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .cl2-muted { font-size: 12px; color: var(--text-3); margin-right: auto; } .cl2-list { position: relative; } .cl2-month { position: sticky; top: 0; z-index: 2; font-size: 12px; font-weight: 800; color: var(--text-3); padding: 8px 0 8px 32px; margin: 4px 0 4px; background: linear-gradient(180deg, var(--bg) 70%, transparent); } .cl2-entry { display: grid; grid-template-columns: 32px 1fr; } .cl2-rail { position: relative; } .cl2-rail::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--border); } .cl2-entry:last-child .cl2-rail::before { bottom: auto; height: 28px; } .cl2-dot { position: absolute; left: 3px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 0 0 3px var(--bg); } .cl2-entry.type-feature .cl2-dot { background: var(--good); } .cl2-entry.type-fix .cl2-dot { background: var(--warn); } .cl2-entry.type-update .cl2-dot { background: var(--accent); } .cl2-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px 14px; margin: 0 0 12px; min-width: 0; transition: border-color .12s ease; } .cl2-card:hover { border-color: var(--text-3); } .cl2-entry.is-new .cl2-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .cl2-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); } .cl2-pill { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); } .cl2-entry.type-feature .cl2-pill { background: var(--good-soft); color: var(--good); } .cl2-entry.type-fix .cl2-pill { background: var(--warn-soft); color: var(--warn); } .cl2-entry.type-update .cl2-pill { background: var(--accent-soft); color: var(--accent); } .cl2-author { display: inline-flex; align-items: center; gap: 6px; } .cl2-author .avatar, .cl2-author .chat-avatar { width: 18px; height: 18px; font-size: 8px; } .cl2-author b { color: var(--text-2); } .cl2-newtag { font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; } .cl2-del { border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 13px; opacity: 0; transition: opacity .12s; } .cl2-card:hover .cl2-del { opacity: 1; } .cl2-del:hover { color: var(--bad); } .cl2-title { margin: 8px 0 0; font-size: var(--fs-card); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; } .cl2-body { margin-top: 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; } .cl2-body p { margin: 0 0 8px; } .cl2-body ul { margin: 0 0 10px; padding-left: 18px; } .cl2-body li { margin: 3px 0; } .cl2-body li::marker { color: var(--text-3); } .cl2-sec { font-size: 12px; font-weight: 800; color: var(--text-3); margin: 12px 0 6px; } .cl2-sec:first-child { margin-top: 2px; } .cl2-body.is-collapsed { max-height: 8.6em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); } .cl2-toggle { margin-top: 6px; background: none; border: none; color: var(--accent-text); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0; } .cl2-toggle:hover { text-decoration: underline; } .cl2-more { display: flex; justify-content: center; padding: 8px 0 24px 32px; } @media (max-width: 640px) { .cl2-entry { grid-template-columns: 22px 1fr; } .cl2-month { padding-left: 22px; } .cl2-more { padding-left: 22px; } .cl2-card { padding: 14px 16px 12px; border-radius: var(--radius); } .cl2-compose-row { grid-template-columns: 1fr; } .cl2-tools { width: 100%; } .cl2-tools .team-search { flex: 1; max-width: none; } .cl2-del { opacity: 1; } } /* ---------- Sidebar: categories, quick access ---------- */ .sidebar-nav { gap: 2px; } .nav-divider { display: none; } .nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-cat-wrap { display: flex; flex-direction: column; } .nav-cat { user-select: none; } .nav-cat.holds-active { color: var(--text); } .nav-cat.holds-active svg:first-child { opacity: 1; color: var(--accent); } .nav-chev { width: 14px !important; height: 14px !important; opacity: .5 !important; margin-left: auto; transition: transform .28s cubic-bezier(.2, .7, .2, 1); } .is-open > .nav-cat .nav-chev { transform: rotate(90deg); opacity: .8 !important; } .nav-qa-edit { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: transparent; color: var(--text-3); border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background .15s; } .nav-quick:hover .nav-qa-edit, .is-open > .nav-quick .nav-qa-edit { opacity: 1; } .nav-qa-edit:hover { color: var(--text); background: var(--surface-3); } .nav-qa-edit svg { width: 13px !important; height: 13px !important; opacity: 1 !important; } /* the slide: grid rows 0fr → 1fr is the smooth, height-agnostic way */ .nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2, .7, .2, 1); } .nav-cat-wrap.is-open > .nav-sub { grid-template-rows: 1fr; } .nav-sub-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 1px; padding: 0; transition: padding .32s cubic-bezier(.2, .7, .2, 1); } .nav-cat-wrap.is-open > .nav-sub > .nav-sub-inner { padding: 2px 0 4px; } .nav-sub-item { padding: 7px 10px 7px 36px; font-size: 12.5px; font-weight: 600; color: var(--text-2); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), background .15s, color .15s; transition-delay: calc(var(--i, 0) * 28ms); } .nav-cat-wrap.is-open .nav-sub-item { opacity: 1; transform: none; } .nav-sub-item::before { left: -12px; } .nav-sub-item.active { color: var(--accent); background: var(--accent-soft); } .nav-sub-empty { color: var(--text-3); font-weight: 500; font-style: italic; } .nav-sub-empty:hover { color: var(--text); } .nav-cat-badge { margin-left: 4px; } /* quick access modal */ .qa-modal { max-width: 860px; } .qa-title { margin: 0 0 4px; font-size: var(--fs-card); } .qa-sub { margin: 0 0 18px; font-size: 12.5px; color: var(--text-3); } .qa-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; min-height: 320px; } .qa-col-title { font-size: var(--fs-panel); font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } .qa-count { font-size: var(--fs-meta); color: var(--text-3); font-weight: 700; } .qa-left { border-right: 1px solid var(--border); padding-right: 20px; } .qa-cat { margin-bottom: 14px; } .qa-cat-name { font-size: 12px; font-weight: 800; color: var(--text-3); margin-bottom: 8px; } .qa-chips { display: flex; flex-wrap: wrap; gap: 8px; } .qa-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: var(--radius); cursor: pointer; transition: border-color .15s, transform .15s; } .qa-chip:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); } .qa-chip:disabled { opacity: .55; cursor: default; } .qa-chip.is-on { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .qa-plus { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .qa-chip.is-on .qa-plus { background: var(--good); } .qa-picked { display: flex; flex-direction: column; gap: 6px; } .qa-empty { font-size: 12.5px; color: var(--text-3); padding: 30px 10px; text-align: center; line-height: 1.5; } .qa-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } @media (max-width: 720px) { .qa-grid { grid-template-columns: 1fr; } .qa-left { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 14px; } } @media (hover: none) { .nav-qa-edit { opacity: 1; } } .nav-quick-empty .nav-qa-edit { margin-left: auto; opacity: 0; flex: none; width: 16px; height: 16px; } .nav-quick-empty:hover .nav-qa-edit { opacity: 1; } @media (hover: none) { .nav-quick-empty .nav-qa-edit { opacity: 1; } } /* closing: rows fade fast, no stagger, while the panel slides shut */ .nav-cat-wrap:not(.is-open) .nav-sub-item { transition-delay: 0ms; transition-duration: .16s, .16s, .15s, .15s; } .nav-sub-inner { will-change: height; } /* qa: scrolling left column */ .qa-grid { height: min(520px, 62vh); min-height: 0; } .qa-left { overflow-y: auto; padding-right: 16px; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; } .qa-left::-webkit-scrollbar { width: 6px; } .qa-left::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; } .qa-right { overflow-y: auto; min-height: 0; } .qa-left .qa-col-title, .qa-right .qa-col-title { position: sticky; top: 0; background: var(--surface); z-index: 1; padding-bottom: 4px; } .qa-chip.is-on .qa-plus { background: var(--text-3); } .qa-chip.is-on:hover .qa-plus { background: var(--bad); } .qa-empty { padding-top: 60px; } @media (max-width: 720px) { .qa-grid { height: auto; } .qa-left { max-height: 45vh; } } .nav-chev { display: none !important; } /* breathing room between the Home/Quick access pair and the categories */ .nav-quick-empty, .nav-cat-wrap[data-nav-cat="quick"] { margin-bottom: 18px; position: relative; } .nav-quick-empty::after, .nav-cat-wrap[data-nav-cat="quick"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -9px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border) 85%, transparent) 20%, color-mix(in srgb, var(--border) 85%, transparent) 80%, transparent); pointer-events: none; } /* ---------- Analytics sub-screens ---------- */ .an-sub-chips { margin-bottom: 12px; } .an-vbars { display: flex; align-items: flex-end; gap: 4px; height: calc(var(--h, 96px) + 34px); padding: 0 2px; } .an-vbar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; } .an-vbar { width: 100%; max-width: 34px; background: var(--surface-3); border-radius: 5px 5px 2px 2px; } .an-vbar.has-data { background: var(--data); } .an-vbar-col:hover .an-vbar.has-data { filter: brightness(1.15); } .an-vbar-label { font-size: var(--fs-micro); color: var(--text-3); font-weight: 700; white-space: nowrap; height: 12px; } .an-vbar-val { font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; } .an-line { width: 100%; height: 180px; display: block; margin-top: 6px; } .an-line-area { fill: color-mix(in srgb, var(--text-3) 18%, transparent); } .an-line-b { stroke: var(--text-3); stroke-width: 1.5; } .an-line-a { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; } .an-line text { font-size: var(--fs-meta); fill: var(--text-3); } .an-line-legend { display: flex; gap: 16px; font-size: var(--fs-meta); color: var(--text-3); margin-top: 6px; } .an-line-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--text-3); } .an-line-legend i.a { background: var(--accent); } .an-line-legend i.b { background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); } .an-line-legend i.c { background: var(--surface-3); } .an-lives-table tbody tr.an-live-row { cursor: pointer; } .an-lives-table tbody tr.an-live-row:hover td { background: var(--surface-2); } .an-lives-table tr.is-open td { background: var(--surface-2); } .an-live-chev { color: var(--text-3); width: 20px; } .an-live-detail td { background: var(--surface-2); padding: 14px 16px 18px; white-space: normal; } .an-ld { display: flex; flex-direction: column; gap: 12px; } .an-facts-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .an-row-bar-inline { display: inline-block; width: 90px; height: 6px; vertical-align: middle; margin-right: 8px; } .an-stack { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding: 0 2px; } .an-stack-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; } .an-stack-bar { width: 100%; max-width: 34px; height: 100px; display: flex; flex-direction: column-reverse; border-radius: 5px 5px 2px 2px; overflow: hidden; background: var(--surface-2); } .an-stack-bar i { display: block; width: 100%; } .an-stack-bar i.l { background: var(--accent); } .an-stack-bar i.v { background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); } .an-stack-bar i.c { background: var(--surface-3); } .an-stack-col span { font-size: var(--fs-meta); color: var(--text-3); font-weight: 700; } .an-ai-text { font-size: 14px; line-height: 1.65; color: var(--text); padding: 4px 0 8px; } .an-ai-text b { display: block; margin-top: 12px; font-size: 12px; color: var(--text-3); } .an-ai .tts-form-foot { border-top: 1px solid var(--border); padding-top: 12px; } @media (max-width: 720px) { .an-facts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .an-ai-text p { margin: 0 0 12px; } .an-ai-text p:last-child { margin-bottom: 0; } .an-ai-text p > b:only-child, .an-ai-text p > b:first-child { display: inline; font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0; } /* desktop: the sidebar carries the sub-screens, so the in-page switchers go */ @media (min-width: 861px) { #anSubChips, #inventoryViewChips, .assist-switch { display: none !important; } .panel-row:has(> #financesTabChips) { display: none; } } .nav-count { margin-left: auto; font-size: var(--fs-meta); font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-variant-numeric: tabular-nums; } .nav-count.is-hot { background: var(--accent-soft); color: var(--accent); } .nav-count[hidden] { display: none; } .nav-sub-item { display: flex; align-items: center; gap: 8px; } /* ---------- calendar ↔ TikTok ---------- */ .cal-badge-sync { background: var(--accent-soft); color: var(--accent); } .cal-live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px 14px; margin: 12px 0 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); } .cal-live-stats > div { display: flex; flex-direction: column; } .cal-live-stats b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .cal-live-stats span { font-size: 12px; color: var(--text-3); font-weight: 700; } .cal-hint { font-size: 12.5px; padding: 8px 11px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); margin: 6px 0 4px; line-height: 1.45; } .cal-day-num { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .cal-day-sales { font-size: var(--fs-meta); font-weight: 800; color: var(--good); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .cal-day.out .cal-day-sales { opacity: .5; } /* ---------- Orders, Seller Center layout ---------- */ #view-orders { max-width: 1240px; } .pq-sub-chips { margin-bottom: 12px; } .pq-screen[hidden] { display: none; } .pq-card-block { padding: 18px 22px; } .pq-list-block { padding-bottom: 14px; } .pq-action { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 22px; } .pq-action-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* The caught-up line under attention tiles; on its own when nothing needs eyes. */ .pq-clear { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); } .pq-clear .ic { color: var(--good); font-size: 16px; margin-top: 2px; } .pq-clear:first-child { padding: 2px 0; } .pq-act { cursor: pointer; min-width: 0; padding: 4px 6px; margin: -4px -6px; border-radius: var(--radius); transition: background .12s; } .pq-act:hover { background: color-mix(in srgb, var(--surface-3) 70%, transparent); } .pq-act-label { font-size: 12.5px; color: var(--text-2); font-weight: 600; line-height: 1.3; min-height: 32px; } .pq-act-value { font-size: 26px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.1; } .pq-act.is-hot .pq-act-value { color: var(--bad); } .pq-act.is-warn .pq-act-value { color: var(--warn); } .pq-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; } .pq-tabs::-webkit-scrollbar { display: none; } .pq-tab { background: none; border: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 700; padding: 8px 2px 10px; cursor: pointer; white-space: nowrap; position: relative; } .pq-tab .n { color: var(--text-3); font-weight: 700; margin-left: 5px; } .pq-tab:hover { color: var(--text); } .pq-tab.active { color: var(--accent); } .pq-tab.active .n { color: var(--accent); } .pq-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; } .pq-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .pq-select { padding: 8px 12px; font-size: 12.5px; } .pq-found { font-size: 12.5px; color: var(--text-3); } .pq-icon-btn { font-size: 15px; padding: 5px 10px; } #view-orders .pq-shipbar { margin-bottom: 12px; } .pq-list-single { display: flex; flex-direction: column; gap: 12px; } /* the table */ .pq-table-wrap { grid-column: 1 / -1; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } .pq-table { width: 100%; border-collapse: collapse; min-width: 1040px; font-size: 12.5px; } .pq-table th { text-align: left; font-size: 12px; font-weight: 800; color: var(--text-3); padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .pq-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .pq-table tr:last-child td { border-bottom: none; } .pq-table tbody tr { cursor: pointer; transition: background .12s; } .pq-table tbody tr:hover td { background: var(--surface-2); } .pq-table tbody tr.is-selected td { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); } .pq-table .pq-id { display: block; } /* Same-buyer group header: one row above the orders that can ship as one package. */ .pq-table tr.pq-group td, .pq-table tbody tr.pq-group:hover td { background: var(--warn-soft); padding: 8px 12px; cursor: default; } .pq-group-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); } .pq-group-row b { color: var(--text); } .pq-group-row .ic { color: var(--warn); font-size: 15px; } .pq-group-row .btn-secondary { margin-left: auto; } .pq-group-card { grid-column: 1 / -1; background: var(--warn-soft); border-radius: var(--radius); padding: 10px 14px; } .pq-td-sub { font-size: var(--fs-meta); color: var(--text-3); margin-top: 3px; white-space: nowrap; } .pq-td-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; } .pq-td-money { font-weight: 800; font-variant-numeric: tabular-nums; } .pq-td-actions { display: flex; gap: 6px; justify-content: flex-end; } .pq-td-actions .pq-pack-btn { padding: 6px 10px; font-size: var(--fs-meta); } .pq-sel-td { width: 28px; } .pq-empty-box { grid-column: 1 / -1; padding: 48px 20px; text-align: center; color: var(--text-3); font-size: 13px; } .pq-empty-box .ico { font-size: 34px; margin-bottom: 8px; opacity: .5; line-height: 1; } /* performance */ .perf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .perf-card { background: var(--surface-2); border-radius: var(--radius); padding: 16px 18px; border-left: 3px solid transparent; } .perf-card.is-main { border-left-color: var(--accent); } .perf-card-label { font-size: 13px; font-weight: 700; color: var(--text-2); } .perf-card-value { font-size: 28px; font-weight: 800; margin: 8px 0 4px; font-variant-numeric: tabular-nums; } .perf-card-sub { font-size: 12px; color: var(--text-3); line-height: 1.45; } .perf-card a { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 700; font-size: 12.5px; text-decoration: none; cursor: pointer; } .perf-delta { font-size: var(--fs-meta); font-weight: 800; margin-left: 6px; } .perf-delta.good { color: var(--good); } .perf-delta.bad { color: var(--bad); } @media (max-width: 860px) { .pq-action { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pq-card-block { padding: 14px 16px; } } @media (min-width: 861px) { .pq-sub-chips { display: none !important; } } /* ---------- Pay (Team → Pay) ---------- */ #view-pay { max-width: 1240px; } .pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pay-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .pay-actions .pq-pack-btn { padding: 8px 14px; font-size: 12.5px; } .pay-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; } .pay-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .pay-card-head .hm2-title { margin-bottom: 2px; } .pay-sub { font-size: 12.5px; color: var(--text-3); } .pay-people { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .pay-person { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: border-color .12s, background .12s; } .pay-person:hover { border-color: var(--text-3); } .pay-person.is-on { border-color: var(--accent); background: var(--accent-soft); } .pay-person .f-avatar { width: 26px; height: 26px; font-size: var(--fs-meta); flex: none; } .pay-person b { font-size: 12.5px; display: block; line-height: 1.15; } .pay-person small { font-size: var(--fs-meta); color: var(--text-3); display: block; } .pay-person-all { padding: 5px 12px; } .pay-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pay-filters .tts-select { padding: 7px 10px; font-size: 12.5px; } .pay-table-wrap, .fin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } .pay-table, .fin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; } .pay-table th, .fin-table th { text-align: left; font-size: 12px; font-weight: 800; color: var(--text-3); padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .pay-table td, .fin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .pay-table tr:last-child td, .fin-table tr:last-child td { border-bottom: none; } .pay-table .num, .fin-table .num, .pay-table th.num, .fin-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pay-table td.pay-note-td, .fin-table td.pay-note-td { color: var(--text-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pay-table tfoot td, .fin-table tfoot td { background: var(--surface-2); font-weight: 800; } .pay-who { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .pay-who .f-avatar { width: 22px; height: 22px; font-size: var(--fs-meta); flex: none; } .pay-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: center; } .pay-rate:first-child { padding-top: 0; } .pay-rate:last-child { border-bottom: none; padding-bottom: 0; } .pay-rate-name { font-weight: 800; font-size: 13.5px; display: flex; align-items: center; gap: 8px; min-width: 0; } .pay-rate-type { font-size: 12px; font-weight: 800; color: var(--text-3); background: var(--surface-3); padding: 2px 7px; border-radius: 999px; flex: none; } .pay-rate-amt { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; } .pay-rate-notes { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); } .pay-req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: center; } .pay-req:last-child { border-bottom: none; } .pay-req-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .pay-req-main .f-avatar { width: 30px; height: 30px; font-size: 12px; flex: none; } .pay-req-text { min-width: 0; } .pay-req-text b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pay-req-text span { font-size: 12px; color: var(--text-3); } .pay-req-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .pay-req-amt { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; } .pay-req-note { grid-column: 1 / -1; font-size: 12px; color: var(--text-2); background: var(--surface-2); padding: 8px 10px; border-radius: var(--radius); } .pay-empty { padding: 26px 12px; text-align: center; color: var(--text-3); font-size: 13px; } .pay-switches { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .pay-switch { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; } .pay-switch input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; } .pay-auto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 4px; } .pay-auto-col-title { font-size: var(--fs-meta); font-weight: 800; color: var(--text-3); margin-bottom: 8px; } .pay-auto-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 11px; border-radius: var(--radius); background: var(--surface-2); font-size: 12.5px; margin-bottom: 6px; } .pay-auto-row b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pay-auto-row .sub { grid-column: 1 / -1; font-size: var(--fs-meta); color: var(--text-3); } .pay-auto-pay { font-weight: 800; font-variant-numeric: tabular-nums; } .pay-dlg h3 { margin: 0 0 4px; font-size: var(--fs-card); } .pay-dlg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0 10px; } .pay-dlg-preview { margin-top: 12px; font-size: 13px; color: var(--text-2); background: var(--surface-2); padding: 10px 12px; border-radius: var(--radius); } .pay-dlg-or { text-align: center; font-size: var(--fs-meta); font-weight: 800; letter-spacing: .08em; color: var(--text-3); margin: 10px 0 -4px; } .pq-dlg-field[hidden] { display: none; } @media (max-width: 860px) { .pay-two, .pay-auto-grid { grid-template-columns: 1fr; } .pay-req { grid-template-columns: 1fr; } .pay-req-right { justify-content: space-between; } } /* ---------- Finances cards ---------- */ .fin-amt-pos { color: var(--good); } .fin-amt-neg { color: var(--bad); } .fin-amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .fin-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; } .fin-filters .team-search { width: 220px; max-width: 100%; } .fin-cost { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 11px 0; border-bottom: 1px solid var(--border); align-items: center; } .fin-cost:last-child { border-bottom: none; } .fin-cost b { font-size: 13.5px; } .fin-cost .sub { font-size: 12px; color: var(--text-3); } .fin-cost .sub.is-due { color: var(--warn); font-weight: 700; } .fin-cost .sub.is-late { color: var(--bad); font-weight: 700; } .fin-note { margin-top: 14px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius); font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .fin-ue { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; } .fin-ue-formula { margin-top: 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.5; } .fin-cat-rows { display: flex; flex-direction: column; gap: 8px; } .fin-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 12.5px; align-items: center; } .fin-cat-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; } .fin-cat-bar > span { display: block; height: 100%; background: var(--data); border-radius: 3px; } .fin-cat-bar.is-in > span { background: var(--good); } .fin-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 120px; margin-top: 10px; } .fin-month { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; min-width: 0; } .fin-month-bars { display: flex; gap: 2px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; } .fin-month-bars span { display: block; width: 40%; max-width: 14px; border-radius: 3px 3px 0 0; background: var(--good); min-height: 2px; } .fin-month-bars span.exp { background: var(--bad); opacity: .85; } .fin-month-label { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; } .fin-legend { display: flex; gap: 14px; font-size: var(--fs-meta); color: var(--text-3); margin-top: 8px; } .fin-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; } .fin-sync { font-size: 12px; color: var(--text-3); } .fin-toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius); font-size: 12.5px; line-height: 1.45; margin-top: 16px; } .fin-toggle-row b { display: block; } @media (max-width: 860px) { .fin-months { grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; } .fin-month { height: 90px; } } @media (min-width: 861px) { #view-finances .pq-sub-chips { display: none !important; } } /* ---------- Inventory cards ---------- */ #view-inventory { max-width: 1240px; } #view-inventory .pq-sub-chips { margin-bottom: 14px; } .inv-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .inv-cats:empty { display: none; } .inv-cat { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: border-color .12s, background .12s; } .inv-cat:hover { border-color: var(--text-3); } .inv-cat.is-on { border-color: var(--accent); background: var(--accent-soft); } .inv-cat-icon { font-size: 16px; line-height: 1; } .inv-cat b { font-size: 12.5px; display: block; line-height: 1.15; } .inv-cat small { font-size: var(--fs-meta); color: var(--text-3); display: block; } .inv-browse-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .inv-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .inv-tools .inventory-search { max-width: 260px; min-width: 180px; flex: 1; } .inv-tools .tts-select { padding: 7px 10px; font-size: 12.5px; margin-left: auto; } .inv-tools .chips .chip { font-size: 12px; } #view-inventory .subcat-row { margin-bottom: 14px; } #view-inventory .poster-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } #view-inventory .poster-card { border-radius: var(--radius); background: var(--surface-2); } #view-inventory .poster-card-foot { padding: 8px 10px 9px; gap: 6px; flex-direction: column; align-items: stretch; } #view-inventory .poster-code { flex: none; font-size: 12.5px; } #view-inventory .poster-qty-wrap { justify-content: space-between; } #view-inventory .poster-qty-wrap .poster-qty-input { flex: 1; width: auto; min-width: 0; } #view-inventory .poster-remove-btn { margin-left: 2px; } .poster-step { width: 24px; height: 26px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; line-height: 1; display: inline-grid; place-items: center; flex: none; padding: 0; } .poster-step:hover { color: var(--text); border-color: var(--text-3); } #view-inventory .poster-qty-input { width: 38px; padding: 5px 2px; } #view-inventory .poster-qty-wrap { gap: 3px; } .inv-history-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 16px; } .inv-history-panel[hidden] { display: none; } #view-inventory .load-more-wrap { margin: 18px 0 4px; } #view-inventory .empty-state { padding: 26px 12px; } @media (min-width: 861px) { #view-inventory .pq-sub-chips { display: none !important; } } @media (max-width: 860px) { .inv-tools .tts-select { margin-left: 0; } } /* ---------- Manage orders, card layout ---------- */ #view-orders .pq-action { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 20px; } @media (min-width: 1100px) { #view-orders .pq-action { grid-template-columns: repeat(6, minmax(0, 1fr)); } } #view-orders .pq-action .hm2-metric.is-on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } #view-orders .pq-action .hm2-metric-label { white-space: normal; min-height: 34px; align-items: flex-start; line-height: 1.25; } #view-orders .pq-action .hm2-metric-value.is-warn { color: var(--warn); } #view-orders .pq-action .hm2-metric-value.is-hot { color: var(--bad); } #pqPerfLine { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 4px; } #pqPerfLine b { color: var(--text); font-weight: 700; } #pqPerfLine a { color: var(--accent); font-weight: 700; text-decoration: none; } .pq-syncstate { font-size: 12px; color: var(--text-3); white-space: nowrap; } .pq-syncstate.is-stale { color: var(--warn); } .pq-syncstate.is-err { color: var(--bad); } .pq-orders-card .pq-tabs { margin-bottom: 14px; } .pq-orders-card .pq-filterbar { margin-bottom: 14px; } .pq-orders-card .pq-filterbar .team-search { flex: 1; min-width: 180px; max-width: 320px; } #view-orders .pq-shipbar { margin-bottom: 14px; } #view-orders .load-more-wrap { margin: 16px 0 2px; } /* skeleton while the first load is in flight */ @keyframes pqShimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } } .pq-skel { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%); background-size: 800px 100%; animation: pqShimmer 1.2s linear infinite; border-radius: var(--radius); } .pq-skel-tile { height: 74px; } .pq-skel-rows { display: flex; flex-direction: column; gap: 8px; } .pq-skel-row { height: 62px; border-radius: var(--radius); } /* the table */ #view-orders .pq-table-wrap { border-radius: var(--radius); } #view-orders .pq-table { min-width: 880px; } #view-orders .pq-table th { padding: 11px 12px; } #view-orders .pq-table td { padding: 11px 10px; vertical-align: middle; } #view-orders .pq-table .pq-td-sub { white-space: normal; } #view-orders .pq-ship-cell { max-width: 200px; } #view-orders .pq-buyer-text { max-width: 190px; } #view-orders .pq-td-actions { flex-wrap: nowrap; } #view-orders .pq-table tbody tr { transition: background .1s; } .pq-buyer { display: flex; align-items: center; min-width: 0; } .pq-buyer-text { min-width: 0; } .pq-buyer-text b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .pq-items { display: flex; align-items: center; gap: 10px; } .pq-thumb-stack { display: flex; flex: none; } .pq-thumb-stack img { width: 28px; height: 38px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid var(--surface); background: var(--surface-3); margin-left: -10px; box-shadow: 0 1px 3px rgba(0,0,0,.35); } .pq-thumb-stack img:first-child { margin-left: 0; } .pq-items-text b { display: block; font-size: 12.5px; } .pq-items-text span { font-size: var(--fs-meta); color: var(--text-3); display: block; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pq-status-cell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .pq-due { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .pq-due.tone-soon { background: var(--warn-soft); color: var(--warn); } .pq-due.tone-late { background: var(--bad-soft); color: var(--bad); } .pq-due.tone-ok { background: var(--good-soft); color: var(--good); } .pq-packed-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--good-soft); color: var(--good); white-space: nowrap; } .pq-order-id { font-weight: 800; font-variant-numeric: tabular-nums; } .pq-ship-cell b { display: block; font-size: 12.5px; font-weight: 700; } .pq-td-actions .btn-secondary { padding: 6px 10px; font-size: var(--fs-meta); } @media (max-width: 860px) { #view-orders .pq-action { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pq-syncstate { display: none; } } /* ---------- Analytics, card layout ---------- */ #view-analytics { max-width: 1240px; } #view-analytics .an-sub-chips { margin-bottom: 14px; } #view-analytics .an-body { gap: 16px; } #view-analytics .an-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; } #view-analytics .an-card-head { margin-bottom: 14px; align-items: flex-start; } #view-analytics .an-card-head h3 { font-size: var(--fs-card); font-weight: 800; letter-spacing: -0.01em; } #view-analytics .an-card-head .an-muted { font-size: 12.5px; } #view-analytics .an-card-head-2 { margin-top: 20px; padding-top: 16px; } #view-analytics .an-kpi-card { padding: 22px 24px; } #view-analytics .an-kpi { cursor: default; } #view-analytics .an-kpi:hover { background: transparent; } #view-analytics .an-kpi-accent .hm2-metric-value { color: var(--accent); } #view-analytics .an-kpi-warn .hm2-metric-value { color: var(--warn); } #view-analytics .an-kpi .an-delta { margin-left: 6px; font-size: var(--fs-meta); vertical-align: middle; } #view-analytics .an-tk { margin-top: 18px; padding: 16px 18px; border: none; border-radius: var(--radius); background: var(--surface-2); } #view-analytics .an-tk-head { margin-bottom: 12px; } #view-analytics .an-tk-grid b { font-size: 18px; } #view-analytics .an-heat { padding: 0; overflow: hidden; } #view-analytics .an-table-wrap { border-radius: var(--radius); } #view-analytics .an-table th, #view-analytics .po-table th { font-size: 12px; font-weight: 800; color: var(--text-3); background: var(--surface-2); } #view-analytics .an-live-row { cursor: pointer; } #view-analytics .an-live-row:hover td { background: var(--surface-2); } #view-analytics .an-ai { max-width: 860px; } #view-analytics .an-ai-text { font-size: 14.5px; line-height: 1.65; } #view-analytics .an-ai-text p { margin: 0 0 12px; } #view-analytics .an-ai-text b { font-weight: 800; } #view-analytics .an-empty { padding: 36px 20px; text-align: center; color: var(--text-3); font-size: 13px; } .an-skel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 20px; } .an-skel-kpi { height: 70px; } .an-skel-card { height: 220px; border-radius: var(--radius-lg); } #anActions .hm2-chips { display: flex; gap: 6px; } @media (max-width: 860px) { #view-analytics .an-card { padding: 18px 18px; border-radius: var(--radius-lg); } #view-analytics .an-two, #view-analytics .an-three { grid-template-columns: 1fr; } #anActions { width: 100%; justify-content: space-between; } } /* ---------- layout stability ---------- */ @media (min-width: 861px) { .pay-head > div:first-child { flex: 1 1 380px; min-width: 0; } .pay-head .pay-actions { flex: none; } .pay-head .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } .sidebar-nav .nav-skel { animation: none; } .sidebar-brand { cursor: pointer; } /* ---------- personal space: routines ---------- */ .rt-daybar { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; } .rt-nav { width: 30px; height: 30px; font-size: 18px; line-height: 1; } .rt-nav:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); } .rt-daylabel { display: flex; flex-direction: column; min-width: 170px; text-align: center; } .rt-daylabel b { font-size: 15px; } .rt-daylabel span { font-size: 12px; color: var(--text-3); } .rt-prog { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); margin-bottom: 14px; } .rt-prog-bar { flex: 1; max-width: 320px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .rt-prog-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s; } .rt-body { display: flex; flex-direction: column; gap: 14px; } .rt-group .hm2-title { margin-bottom: 4px; } .rt-group.is-quiet { opacity: .75; } .rt-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); } .rt-row:last-child { border-bottom: none; } .rt-check { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: 2px solid var(--border-strong, var(--border)); background: transparent; color: transparent; display: grid; place-items: center; transition: background .15s, border-color .15s, transform .1s; } .rt-check svg { width: 15px; height: 15px; } .rt-check:hover { border-color: var(--accent); } .rt-check:active { transform: scale(.92); } .rt-check:disabled { opacity: .35; cursor: default; } .rt-row.is-done .rt-check { background: var(--good); border-color: var(--good); color: #fff; } .rt-row.is-done .rt-name { color: var(--text-3); text-decoration: line-through; } .rt-row.is-notdue .rt-name { color: var(--text-2); } .rt-main { flex: 1; min-width: 0; } .rt-name { font-weight: 700; font-size: 14px; } .rt-sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-hist { display: flex; gap: 3px; flex-shrink: 0; } .rt-hist i { width: 7px; height: 14px; border-radius: 3px; background: var(--surface-2); } .rt-hist i.is-done { background: var(--good); } .rt-hist i.is-miss { background: var(--bad-soft, var(--surface-3)); } .rt-hist i.is-off { opacity: .45; } .rt-streak { font-size: 11.5px; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .rt-streak.is-quiet { color: var(--text-3); background: var(--surface-2); font-weight: 700; } .rt-edit { flex-shrink: 0; } .rt-edit:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); } .rt-archived { margin-top: 2px; color: var(--text-3); font-size: 13px; } .rt-archived summary { cursor: pointer; padding: 6px 4px; } .rt-archived .rt-row { padding-left: 8px; } .rt-days { display: flex; gap: 6px; flex-wrap: wrap; } .rt-day { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; } .rt-day.on { background: var(--accent); border-color: var(--accent); color: #fff; } .rt-presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .rt-form-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .rt-form-foot .spacer { flex: 1; } @media (max-width: 640px) { .rt-hist { display: none; } .rt-daylabel { min-width: 0; flex: 1; } } /* ---------- personal space: notes ---------- */ .nt-search { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; min-width: 180px; } .nt-search:focus { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; } .nt-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 14px; align-items: start; } .nt-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 220px); overflow-y: auto; scrollbar-width: thin; } .nt-item { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; color: var(--text); font: inherit; } .nt-item:hover { background: var(--surface-2); } .nt-item.active { background: var(--accent-soft); } .nt-item-title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; min-width: 0; } .nt-item-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-item-snippet { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-item-when { font-size: 11px; color: var(--text-3); } .nt-pin { color: var(--accent); display: inline-flex; flex-shrink: 0; } .nt-pin svg { width: 12px; height: 12px; } .nt-editor { display: flex; flex-direction: column; gap: 10px; min-height: 420px; } .nt-editor-head { display: flex; align-items: center; gap: 8px; } .nt-back { display: none; } .nt-title { flex: 1; min-width: 0; background: none; border: none; border-bottom: 1px solid var(--border); padding: 8px 2px; font: inherit; font-size: 18px; font-weight: 800; color: var(--text); } .nt-title:focus { outline: none; border-bottom-color: var(--accent); } .nt-pin-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .nt-pin-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .nt-body { flex: 1; min-height: 340px; resize: vertical; background: transparent; border: none; padding: 4px 2px; font: inherit; font-size: 14.5px; line-height: 1.6; color: var(--text); } .nt-body:focus { outline: none; } .nt-meta { font-size: 11.5px; color: var(--text-3); min-height: 14px; } .nt-placeholder { min-height: 200px; display: flex; align-items: center; justify-content: center; } @media (max-width: 760px) { .nt-layout { grid-template-columns: 1fr; } .nt-layout.is-editing .nt-list, .nt-layout.is-editing .nt-placeholder { display: none; } .nt-layout:not(.is-editing) .nt-editor { display: none; } .nt-back { display: inline-flex; } } /* personal Home: today's routines */ .hp-rt .rt-row { padding: 8px 2px; } .hp-rt .rt-done-line { font-size: 12.5px; color: var(--text-3); margin-top: 8px; } /* Manage orders: LIVE numbers (the sticky-note order) */ .pq-live { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 800; font-size: 13.5px; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; } .pq-live small { font-size: 10.5px; font-weight: 700; color: var(--text-2); } .pq-live.is-tracker { border: 1px dashed var(--accent); background: transparent; } .pq-live-td { white-space: nowrap; } .pq-lives { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; } .pq-lives:empty { display: none; } .pq-lives-label { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; } .pq-lives .chip b { margin-left: 5px; font-variant-numeric: tabular-nums; } .pq-lives .chip i { font-style: normal; margin-left: 6px; font-size: 11px; } .pq-live-ok { color: var(--good); } .pq-live-diff { color: var(--warn); font-weight: 700; } .pq-card .pq-live { margin-right: 8px; } /* ---------- customer messages ---------- */ .msg-notice { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 14px; border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--radius); font-size: var(--fs-body); color: var(--text-2); } .msg-notice b { color: var(--text); } /* Customer messages, laid out like Seller Center's inbox. The screen uses the full width. */ body:has(#view-messages.active) .container { max-width: none; } .msg-head .stats-header h2 { margin-bottom: 4px; } .msg-strip { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--text-3); } .msg-strip b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .msg-actions { align-items: center; } .msg-sync-meta { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; } /* Columns by width: list + thread; +rail from 1200px; +folders from 1300px (folders can be hidden by hand). */ .msg-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; align-items: start; } .msg-folders { display: none; } .msg-folders-show { display: none; } .msg-folder-select { display: block; } @media (min-width: 1200px) { .msg-layout { grid-template-columns: 280px minmax(0, 1fr) 280px; } .msg-orders-inline { display: none; } .msg-rail:not([hidden]) { display: flex; } } @media (min-width: 1400px) { .msg-layout:not(.folders-hidden) { grid-template-columns: 172px 280px minmax(0, 1fr) 280px; } .msg-layout:not(.folders-hidden) .msg-folders { display: flex; } .msg-layout:not(.folders-hidden) .msg-folder-select { display: none; } .msg-layout.folders-hidden .msg-folders-show { display: inline-grid; } } /* folders */ .msg-folders { padding: 12px 8px; flex-direction: column; gap: 2px; position: sticky; top: 16px; } .msg-folders-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px 10px; } .msg-folders-head h3 { margin: 0; font-size: var(--fs-card); font-weight: 800; } .msg-folder { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); background: none; border: none; color: var(--text-2); font: inherit; font-size: var(--fs-body); font-weight: 600; text-align: left; cursor: pointer; } .msg-folder span { flex: 1; min-width: 0; } .msg-folder b { font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; } .msg-folder .ic { color: var(--text-3); } .msg-folder:hover { background: var(--surface-2); color: var(--text); } .msg-folder.active { background: var(--accent-soft); color: var(--accent-text); } .msg-folder.active b, .msg-folder.active .ic { color: inherit; } .msg-folder.is-sub { padding: 6px 10px 6px 34px; font-size: 13px; font-weight: 500; } .msg-folder-subs { display: flex; flex-direction: column; gap: 1px; } .msg-folder-subs.is-hidden { display: none; } .msg-folders-rule { height: 1px; background: var(--border); margin: 8px 6px; } /* chat list */ .msg-list { padding: 10px 8px 6px; display: flex; flex-direction: column; gap: 8px; } .msg-list-head { display: flex; gap: 6px; align-items: center; } .msg-list-head .nt-search { flex: 1; min-width: 0; border-radius: 999px; } .msg-folder-select { max-width: 48%; padding: 7px 26px 7px 10px; font-size: 12.5px; border-radius: 999px; } .msg-convos { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 300px); overflow-y: auto; scrollbar-width: thin; } .msg-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 9px 10px; cursor: pointer; color: var(--text); font: inherit; } .msg-row:hover { background: var(--surface-2); } .msg-row.active { background: var(--surface-3); } .msg-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--surface-3, var(--surface-2)); color: var(--text-2); overflow: hidden; flex-shrink: 0; } .msg-avatar img { width: 100%; height: 100%; object-fit: cover; } .msg-avatar.is-sm { width: 28px; height: 28px; font-size: 11px; } .msg-avatar.is-xl { width: 56px; height: 56px; font-size: 18px; } .msg-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .msg-row-top { display: flex; align-items: baseline; gap: 8px; } .msg-row-name { font-weight: 700; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } .msg-row-when { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; } .msg-row-snippet { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-row.is-unread .msg-row-name, .msg-row.is-unread .msg-row-snippet { color: var(--text); } .msg-row.is-unread .msg-row-snippet { font-weight: 600; } .msg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .msg-list-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 12px; color: var(--text-3); font-size: 13px; text-align: center; } .msg-list-empty .ic { font-size: 24px; } .msg-show-closed { background: none; border: none; color: var(--text-2); font: inherit; font-size: var(--fs-meta); font-weight: 700; padding: 8px; cursor: pointer; border-radius: var(--radius-sm); } .msg-show-closed:hover { background: var(--surface-2); color: var(--text); } /* thread */ .msg-thread { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: calc(100vh - 230px); min-height: 560px; } .msg-thread-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .msg-thread-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .msg-thread-who b { font-size: 16px; } .msg-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); } .msg-tag.is-mine { background: var(--accent-soft); color: var(--accent-text); } .msg-tag.is-unassigned { background: var(--warn-soft); color: var(--warn); } .msg-tag.is-closed { background: var(--good-soft); color: var(--good); } .msg-thread-actions { display: flex; gap: 8px; align-items: center; } .msg-iconbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--radius-sm); padding: 6px 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .msg-iconbtn:hover { color: var(--text); border-color: var(--text-3); } .msg-iconbtn.is-primary { background: var(--accent); border-color: transparent; color: #fff; } .msg-iconbtn.is-primary:hover { filter: brightness(1.08); color: #fff; } .msg-orders-inline { border-bottom: 1px solid var(--border); background: var(--surface-2); } .msg-orders-inline summary { cursor: pointer; padding: 9px 18px; font-size: var(--fs-meta); font-weight: 700; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 8px; } .msg-orders-inline summary::-webkit-details-marker { display: none; } .msg-orders-inline summary::before { content: '›'; display: inline-block; transition: transform .15s ease; color: var(--text-3); } .msg-orders-inline[open] summary::before { transform: rotate(90deg); } .msg-orders-inline .msg-orders { padding: 0 12px 10px; } .msg-orders-inline .msg-note-input { margin: 0 12px 12px; width: calc(100% - 24px); } .msg-messages { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; overflow-y: auto; scrollbar-width: thin; } .msg-run { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; } .msg-run.is-buyer { align-self: flex-start; } .msg-run.is-us { align-self: flex-end; flex-direction: row-reverse; } .msg-run-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; } .msg-run.is-us .msg-run-body { align-items: flex-end; } .msg-sender { font-size: var(--fs-meta); color: var(--text-3); margin: 0 4px 1px; display: inline-flex; align-items: center; gap: 4px; } .msg-robot-tag { color: var(--warn); display: inline-flex; } .msg-bubble { padding: 9px 13px; border-radius: 16px; font-size: var(--fs-body); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); } .msg-run.is-buyer .msg-bubble { border-bottom-left-radius: 6px; } .msg-run.is-us .msg-bubble { background: var(--accent-soft); color: var(--text); border-bottom-right-radius: 6px; } .msg-run.is-us .msg-bubble.is-robot { background: var(--surface-2); color: var(--text-2); border: 1px dashed var(--border-strong, var(--border)); } .msg-bubble img { max-width: 260px; border-radius: 10px; display: block; } .msg-meta { font-size: 11px; color: var(--text-3); margin: 1px 4px 0; } .msg-day { align-self: center; font-size: var(--fs-meta); font-weight: 700; color: var(--text-3); padding: 6px 10px 2px; } .msg-event { align-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: 90%; font-size: var(--fs-meta); color: var(--text-3); padding: 2px 10px; } .msg-event .ic { flex-shrink: 0; } .msg-event b { color: var(--text-2); cursor: pointer; } .msg-event b:hover { color: var(--accent-text); } .msg-event time { color: var(--text-3); opacity: .8; white-space: nowrap; } /* reply suggestions + compose */ .msg-compose { border-top: 1px solid var(--border); padding: 12px 18px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); } .msg-suggest { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 8px 10px 6px; } .msg-suggest-head { font-size: 13px; font-weight: 700; padding: 2px 4px 6px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; } .msg-suggest-head::-webkit-details-marker { display: none; } .msg-suggest-head::before { content: '›'; color: var(--text-3); transition: transform .15s ease; } .msg-suggest[open] .msg-suggest-head::before { transform: rotate(90deg); } .msg-suggest-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-size: 13px; padding: 6px 4px; border-radius: var(--radius-sm); cursor: pointer; } .msg-suggest-row:hover { background: var(--surface-3); } .msg-suggest-row i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-3); text-align: center; } .msg-suggest-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-suggest-row em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; } .msg-compose textarea { width: 100%; min-height: 60px; max-height: 160px; resize: none; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-body); line-height: 1.4; } .msg-compose textarea:focus { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; } .msg-compose-foot { display: flex; align-items: center; gap: 12px; } .msg-compose-hint { flex: 1; font-size: 11.5px; color: var(--text-3); } .msg-count { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } .msg-send { padding: 9px 18px; border-radius: 10px; font-size: var(--fs-body); } .msg-thread-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-3); font-size: var(--fs-body); padding: 24px; text-align: center; } .msg-thread-empty b { color: var(--text-2); } .msg-thread-empty-ico { font-size: 26px; color: var(--text-3); margin-bottom: 6px; } /* buyer rail */ .msg-rail { padding: 16px; display: none; flex-direction: column; gap: 14px; position: sticky; top: 16px; } .msg-rail[hidden] { display: none; } .msg-buyer { display: flex; gap: 12px; align-items: center; } .msg-buyer-text { min-width: 0; } .msg-buyer-text b { display: block; font-size: 16px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-note-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-2); cursor: pointer; } .msg-note-btn:hover { color: var(--text); border-color: var(--text-3); } .msg-note-btn.has-note { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .msg-note-input { width: 100%; resize: vertical; min-height: 56px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.45; } .msg-note-input:focus { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; } .msg-note-read { font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; } .msg-rail-empty { font-size: var(--fs-meta); color: var(--text-3); line-height: 1.45; } .msg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; } .msg-stat span { display: block; font-size: var(--fs-meta); color: var(--text-3); } .msg-stat b { display: block; font-size: 14.5px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; } .msg-stat b.is-bad { color: var(--bad); } .msg-rail-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border); } .msg-rail-tab { background: none; border: none; padding: 6px 0 8px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .msg-rail-tab.active { color: var(--text); border-bottom-color: var(--accent); } .msg-rail-tab b { color: var(--text-3); font-weight: 600; margin-left: 3px; } .msg-orders-tools { display: flex; gap: 6px; } .msg-orders-filter { padding: 6px 26px 6px 10px; font-size: 12.5px; max-width: 44%; } .msg-orders-search { flex: 1; min-width: 0; font-size: 12.5px; padding: 6px 10px; } .msg-orders { display: flex; flex-direction: column; gap: 6px; } .msg-orow { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; cursor: pointer; color: var(--text); font: inherit; } .msg-orow:hover { border-color: var(--text-3); } .msg-orow-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .msg-orow-top b { font-variant-numeric: tabular-nums; font-size: var(--fs-body); } .msg-orow-top .status-pill { font-size: 11.5px; } .msg-orow-when { margin-left: auto; font-size: 11.5px; color: var(--text-3); } .msg-live { font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); } .msg-orow-sub { font-size: var(--fs-meta); color: var(--text-3); } .msg-empty-ill { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 10px; color: var(--text-3); text-align: center; } .msg-empty-ill .ic { font-size: 30px; margin-bottom: 6px; } .msg-empty-ill span { font-size: 13.5px; font-weight: 700; color: var(--text-2); } .msg-empty-ill small { font-size: var(--fs-meta); line-height: 1.4; } .msg-about div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .msg-about div:last-child { border-bottom: none; } .msg-about span { color: var(--text-3); } .msg-back { display: none; } @media (max-width: 860px) { .msg-layout, .msg-layout.folders-hidden { grid-template-columns: 1fr; } .msg-layout.is-open .msg-list { display: none; } .msg-layout:not(.is-open) .msg-thread { display: none; } .msg-back { display: inline-flex; } .msg-thread { height: auto; min-height: 70vh; } .msg-messages { max-height: 50vh; } .msg-run { max-width: 92%; } .msg-convos { max-height: none; } .msg-actions { flex-wrap: wrap; } .msg-thread-head { gap: 10px; } .msg-thread-actions { flex-basis: 100%; justify-content: flex-end; } .msg-folder-select { max-width: 56%; } .msg-sync-meta { display: none; } } /* ---------- metals ---------- */ .mt-spot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; } .mt-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 12.5px; } .mt-chip b { font-size: 14px; font-variant-numeric: tabular-nums; } .mt-chip .mt-chip-metal { text-transform: capitalize; font-weight: 700; } .mt-chip .mt-chip-sub { font-size: 11px; color: var(--text-3); } .mt-chip.is-manual { border-color: var(--warn); } .mt-chip.is-none { opacity: .6; } .mt-chip button { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 0 2px; font: inherit; display: inline-flex; } .mt-chip button:hover { color: var(--text); } .mt-chip button svg { width: 13px; height: 13px; } .mt-spot-meta { margin-left: auto; font-size: 11.5px; color: var(--text-3); display: flex; gap: 8px; align-items: center; } .mt-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); } .mt-grade { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--data-soft, var(--surface-2)); color: var(--data, var(--text-2)); } .mt-grade a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; } .mt-metal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .mt-metal-copper { background: #c7743a; } .mt-metal-silver { background: #c9cdd2; } .mt-metal-gold { background: #e2b532; } .mt-metal-platinum { background: #9fb4c8; } .mt-metal-palladium { background: #8aa0b4; } .mt-floor { font-weight: 800; font-variant-numeric: tabular-nums; } .mt-under { color: var(--warn); } .mt-qty0 { color: var(--text-3); } #mtTable td:first-child { max-width: 380px; } #mtTable td:first-child b { word-break: break-word; } .pay-table tr.is-archived td { opacity: .55; } .mt-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mt-form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .mt-hint { font-size: 11.5px; color: var(--text-3); } .mt-moves { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 220px; overflow-y: auto; } .mt-move { display: flex; gap: 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .mt-move:last-child { border-bottom: none; } .mt-move b { min-width: 60px; } @media (max-width: 720px) { .mt-form-row, .mt-form-row-3 { grid-template-columns: 1fr; } .mt-spot-meta { margin-left: 0; width: 100%; } } .mt-lab-toggles { display: flex; flex-direction: column; gap: 4px; justify-content: flex-end; font-size: 12.5px; } .mt-lab-head { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; } .mt-lab-list { margin-top: 6px; } .mt-lab-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; } .mt-lab-row:has(input:checked) { border-color: var(--accent); } .mt-lab-txt { flex: 1; min-width: 0; font-size: 12.5px; } .mt-lab-txt .pq-td-sub { display: block; } .mt-lab-count { width: 64px; text-align: right; } #mtLabelForm textarea { width: 100%; font: inherit; font-size: 12.5px; resize: vertical; } .pr-steps { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; } /* ---------- demo build ---------- */ .demo-chip { margin-left: 8px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #d9a514; background: rgba(217,165,20,.14); border: 1px solid rgba(217,165,20,.45); border-radius: 999px; padding: 3px 8px; vertical-align: middle; } .brand-meta .demo-chip { margin-left: 6px; padding: 2px 6px; font-size: 9px; } .demo-note { margin: 10px 0 18px; font-size: 13px; color: var(--text-2); background: rgba(217,165,20,.08); border: 1px solid rgba(217,165,20,.35); border-radius: 10px; padding: 10px 12px; line-height: 1.45; } .demo-note b { color: var(--text); } /* ---------- shop setup ---------- */ .ws-feat-group { margin-top: 12px; } .ws-feat-group-title { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 6px; } .ws-feat { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; margin-bottom: 6px; } .ws-feat:has(input:checked) { border-color: var(--accent); } .ws-feat input { margin-top: 3px; } .ws-feat-txt { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; } .ws-feat-needs { font-size: 10.5px; color: var(--text-3); font-weight: 600; } .ws-feat-blurb { font-size: 11.5px; color: var(--text-2); } /* ---------- shop setup wizard ---------- */ .pq-dialog.is-wide { max-width: 980px; padding: 0; overflow-y: auto; overflow-x: hidden; } .pq-dialog.is-wide .wss-hero { position: sticky; top: 0; z-index: 1; } .pq-dialog.is-wide .modal-close { top: 14px; right: 14px; z-index: 2; } .wss-hero { position: relative; padding: 26px 28px 18px; background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 55%), var(--surface); border-bottom: 1px solid var(--border); } .wss-hero-txt { padding-right: 40px; } .wss-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; } .wss-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-2); } .wss-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; } .wss-seg { display: flex; flex-direction: column; gap: 8px; background: none; border: none; padding: 0; font: inherit; color: var(--text-3); cursor: default; text-align: left; } .wss-seg-bar { display: block; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .wss-seg-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .35s cubic-bezier(.2,.7,.2,1); } .wss-seg.is-active .wss-seg-bar i, .wss-seg.is-done .wss-seg-bar i { width: 100%; } .wss-seg.is-done .wss-seg-bar i { opacity: .55; } .wss-seg-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; } .wss-seg-label em { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; background: var(--surface-2); color: var(--text-2); transition: background .2s, color .2s; } .wss-seg.is-active { color: var(--text); } .wss-seg.is-active .wss-seg-label em { background: var(--accent); color: #fff; } .wss-seg.is-done { color: var(--text-2); cursor: pointer; } .wss-seg.is-done:hover { color: var(--text); } .wss { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 0; align-items: stretch; } .wss-main { padding: 22px 28px 24px; min-width: 0; } .wss-step { animation: wss-in .24s ease both; } @keyframes wss-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .wss-label { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; display: block; } .wss-namerow { display: flex; align-items: center; gap: 16px; } .wss-mono { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); box-shadow: 0 8px 22px -10px var(--accent); flex-shrink: 0; transition: transform .2s; } .wss-mono.is-big { width: 64px; height: 64px; font-size: 23px; } .wss-namefield { flex: 1; min-width: 0; } .wss-name { width: 100%; font: inherit; font-size: 20px; font-weight: 700; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } .wss-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .wss-hint { font-size: 11.5px; color: var(--text-3); margin-top: 10px; } .wss-tile { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); flex-shrink: 0; transition: background .2s, border-color .2s, color .2s; color: var(--text-3); } .wss-tile svg { width: 18px; height: 18px; } .wss-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wss-preset { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: border-color .15s, transform .15s, box-shadow .15s, background .15s; animation: wss-in .3s ease both; } .wss-preset:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0,0,0,.6); border-color: var(--text-3); } .wss-preset:active { transform: scale(.985); } .wss-preset.is-on { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 70%); box-shadow: 0 0 0 3px var(--accent-soft); } .wss-preset.is-on .wss-tile { background: var(--accent); border-color: var(--accent); color: #fff; } .wss-preset-txt { flex: 1; min-width: 0; } .wss-preset-txt b { display: block; font-size: 13.5px; margin-bottom: 2px; } .wss-preset-txt > span { display: block; font-size: 11.5px; color: var(--text-2); line-height: 1.4; } .wss-preset-txt em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-3); margin-top: 6px; } .wss-tick { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; color: var(--accent); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s cubic-bezier(.3,1.6,.5,1); } .wss-tick svg { width: 18px; height: 18px; } .wss-preset.is-on .wss-tick { opacity: 1; transform: scale(1); } .wss-group-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; } .wss-group-head:first-child { margin-top: 0; } .wss-group-head .wss-label { margin: 0; } .wss-group-count { font-size: 10.5px; font-weight: 700; color: var(--text-3); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); transition: background .2s, color .2s; } .wss-group-count.is-on { background: var(--accent-soft); color: var(--accent); } .wss-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .wss-feat { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: border-color .15s, background .2s, opacity .15s, transform .12s; animation: wss-in .3s ease both; } .wss-feat:hover { border-color: var(--text-3); } .wss-feat:active { transform: scale(.985); } .wss-feat.is-on { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 65%); } .wss-feat.is-on .wss-tile { background: var(--accent); border-color: var(--accent); color: #fff; } .wss-feat.is-locked { opacity: .55; } .wss-feat-txt { flex: 1; min-width: 0; } .wss-feat-txt b { display: block; font-size: 12.5px; } .wss-feat-txt > span { display: block; font-size: 11px; color: var(--text-2); line-height: 1.35; } .wss-feat-needs { display: block; font-style: normal; font-size: 10px; color: var(--text-3); font-weight: 700; margin-top: 2px; } .wss-feat .toggle { pointer-events: none; } .wss-feat .toggle-knob { transition: transform .25s cubic-bezier(.3,1.5,.5,1); } .wss-feat.is-pulse { animation: wss-pulse .55s ease; } @keyframes wss-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 8px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } } .wss-side { border-left: 1px solid var(--border); padding: 22px; background: var(--surface-2); position: sticky; top: 0; align-self: start; max-height: 85vh; overflow-y: auto; box-sizing: border-box; } .wss-side-title { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; } .wss-device { border: 1px solid var(--border); border-radius: 14px; background: var(--bg); padding: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 30px -20px rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 8px; min-height: 300px; } .wss-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text-3); } .wss-brand-meta { display: flex; flex-direction: column; min-width: 0; } .wss-brand .eyebrow { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 800; } .wss-brand .name { font-size: 13.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wss-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; } .wss-nav-item { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; padding: 5px 8px; border-radius: 7px; color: var(--text-2); } .wss-nav-item svg { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; } .wss-nav-item.is-current { background: var(--accent-soft); color: var(--accent); } .wss-nav-item.is-current svg { color: var(--accent); } .wss-nav-item.is-leaf { padding-left: 22px; font-size: 11px; font-weight: 500; color: var(--text-3); } .wss-nav-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); opacity: .6; flex-shrink: 0; } .wss-nav-item.is-new { animation: wss-pop .3s ease both; } @keyframes wss-pop { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } .wss-user { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 11px; } .wss-user-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 10px; } .wss-user b { display: block; font-size: 11px; } .wss-user small { color: var(--text-3); font-size: 9.5px; } .wss-count { margin-top: 10px; font-size: 11.5px; color: var(--text-3); } .wss-count b { color: var(--text); font-variant-numeric: tabular-nums; } .wss-foot { display: flex; align-items: center; gap: 8px; margin-top: 20px; } .wss-cta { display: inline-flex; align-items: center; gap: 6px; } .wss-cta svg { width: 14px; height: 14px; } .wss-summary { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 70%); } .wss-summary-txt { flex: 1; min-width: 0; } .wss-summary-txt .wss-label { margin-bottom: 2px; } .wss-review-big { font-size: 20px; font-weight: 800; letter-spacing: -.01em; } .wss-summary-sub { font-size: 11.5px; color: var(--text-2); margin-top: 2px; } .wss-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wss-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 10px 6px 8px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--text); animation: wss-in .3s ease both; } .wss-chip svg { width: 13px; height: 13px; color: var(--accent); } .wss-chips.is-off .wss-chip { border-color: var(--border); background: transparent; color: var(--text-3); animation: none; } .wss-chips.is-off .wss-chip svg { color: var(--text-3); } .wss-done { text-align: center; padding: 56px 10px; animation: wss-in .3s ease both; } .wss-check { width: 56px; height: 56px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .wss-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: wss-draw .6s ease forwards; } .wss-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: wss-draw .35s ease .45s forwards; } @keyframes wss-draw { to { stroke-dashoffset: 0; } } .wss-done-title { font-size: 20px; font-weight: 800; margin-top: 12px; } @media (max-width: 760px) { .wss { grid-template-columns: 1fr; } .wss-side { border-left: none; border-top: 1px solid var(--border); } .wss-feats, .wss-presets, .wss-progress { grid-template-columns: 1fr; } .wss-main, .wss-hero { padding-left: 18px; padding-right: 18px; } } @media (prefers-reduced-motion: reduce) { .wss-step, .wss-nav-item.is-new, .wss-feat, .wss-preset, .wss-chip, .wss-feat.is-pulse, .wss-done, .wss-check circle, .wss-check path { animation: none; stroke-dashoffset: 0; } .wss-preset:hover, .wss-preset:active, .wss-feat:active { transform: none; } } /* ---------- legal + accessibility ---------- */ .skip-link { position: absolute; left: -9999px; top: 8px; background: var(--accent-solid); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 1000; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 8px; outline: 2px solid #fff; outline-offset: 2px; } .auth-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); margin: 4px 0 8px; cursor: pointer; } .auth-consent input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent); } .auth-consent a, .auth-legal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .auth-legal { font-size: 11.5px; color: var(--text-3); margin: 14px 0 0; text-align: center; line-height: 1.6; } /* ---------- right-click menus ---------- */ .ctx-menu { position: fixed; z-index: 3000; min-width: 210px; max-width: 300px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 40px -18px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.25); animation: ctx-in .12s ease both; } @keyframes ctx-in { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: none; } } .ctx-head { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 6px 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-sep { height: 1px; background: var(--border); margin: 5px 4px; } .ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--text); background: none; border: none; border-radius: 7px; padding: 7px 10px; cursor: pointer; } .ctx-item svg, .ctx-ico-gap { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; } .ctx-item:hover, .ctx-item:focus-visible { background: var(--surface-2); outline: none; } .ctx-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-soft); } .ctx-item:disabled { opacity: .45; cursor: default; } .ctx-item.is-danger { color: var(--danger, #ff5c6c); } .ctx-item.is-danger svg { color: currentColor; } .ctx-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-hint { font-size: 11px; color: var(--text-3); } @media (prefers-reduced-motion: reduce) { .ctx-menu { animation: none; } } /* ---------- members & invites ---------- */ .mb-list { display: flex; flex-direction: column; gap: 6px; } .mb-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; } .mb-row.is-you { border-color: var(--accent-soft); } .mb-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex-shrink: 0; } .mb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mb-who b { font-size: 13px; } .mb-you { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-left: 4px; } .mb-meta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mb-role-cell { flex-shrink: 0; } .mb-role-select { min-width: 120px; } .mb-role { display: inline-flex; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); } .mb-role-owner { background: var(--accent-soft); color: var(--accent); } .mb-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .mb-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .mb-inline-form .tts-input { flex: 1; min-width: 200px; } .mb-invites { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .mb-hint { font-size: 11.5px; color: var(--text-3); margin-top: 8px; display: block; } .mb-perm-group { margin-bottom: 10px; } .mb-perm-group .pq-dlg-row span span { display: block; font-weight: 400; } .mb-danger { border-color: color-mix(in srgb, var(--danger, #ff5c6c) 45%, var(--border)); } .mb-danger-row { display: flex; flex-direction: column; gap: 10px; } .mb-btn-danger { color: var(--danger, #ff5c6c); border-color: color-mix(in srgb, var(--danger, #ff5c6c) 50%, var(--border)); } @media (max-width: 720px) { .mb-row { flex-wrap: wrap; } .mb-actions { width: 100%; justify-content: flex-end; } } .user-chip .chip-sub { font-size: 11px; color: var(--text-3); margin-left: 4px; } .lb-platform { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-3); margin: 0 4px; vertical-align: middle; } /* ---- Whatnot sales: leaderboard money, whales board, show reports, whale flag, no-sale tags ---- */ .lb-sales { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; margin-left: 8px; } .lb-sales b { color: var(--text); font-weight: 700; } .lb-podium-sales { margin-top: 6px; } .lb-podium-sales .lb-sales { margin-left: 0; white-space: normal; justify-content: center; } .wh-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; } .wh-search { margin-left: auto; min-width: 180px; padding: 6px 10px; border: 1px solid var(--text-3); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; } .wh-list { display: flex; flex-direction: column; gap: 6px; } .wh-row { display: grid; grid-template-columns: 28px minmax(150px, 1.3fr) 1fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--surface-3); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .12s; } .wh-row:hover { border-color: var(--text-3); } .wh-row.open { border-color: var(--text-3); } .wh-rank { font-size: 12px; font-weight: 800; color: var(--text-3); } .wh-who { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; } .wh-who a { font-weight: 700; color: var(--text); text-decoration: none; } .wh-who a:hover { text-decoration: underline; } .wh-tier { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; white-space: nowrap; } .wh-tier-1 { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); } .wh-tier-2 { background: color-mix(in srgb, #e0a100 20%, var(--surface)); color: #9a6700; } .wh-tier-3 { background: var(--surface-3); color: var(--text-2); } .wh-money { display: block; font-weight: 700; font-variant-numeric: tabular-nums; } .wh-sub { display: block; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; } .wh-rooms { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--surface-3); } .wh-room { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .wh-room.own { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); } .wh-room a { color: inherit; font-weight: 700; text-decoration: none; } @media (max-width: 720px) { .wh-row { grid-template-columns: 24px 1fr 1fr; } .wh-row > :nth-child(4), .wh-row > :nth-child(5), .wh-row > :nth-child(6) { display: none; } .wh-search { min-width: 0; width: 100%; margin-left: 0; } } .show-modal { max-width: 920px; width: min(920px, 94vw); } .show-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; padding-right: 32px; } .show-head h3 { margin: 0; font-size: 18px; } .show-head #showBack { align-self: flex-start; margin-bottom: 6px; } .show-list { display: flex; flex-direction: column; gap: 6px; } .show-item { display: grid; grid-template-columns: minmax(160px, 2fr) repeat(4, minmax(64px, 1fr)); gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--surface-3); border-radius: 10px; background: var(--surface); cursor: pointer; } .show-item:hover { border-color: var(--text-3); } .show-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .show-item-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .show-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } .show-timeline { display: flex; align-items: flex-end; gap: 2px; height: 56px; padding: 6px 8px; border: 1px solid var(--surface-3); border-radius: 10px; margin-bottom: 12px; background: var(--surface); } .show-bar { flex: 1; min-width: 3px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .85; } .show-section { margin-top: 12px; } .show-buyers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .show-table-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--surface-3); border-radius: 10px; margin-top: 6px; } .show-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .show-table th, .show-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--surface-3); white-space: nowrap; } .show-table th { position: sticky; top: 0; background: var(--surface); font-size: 11px; color: var(--text-3); font-weight: 700; } .show-table .num { text-align: right; font-variant-numeric: tabular-nums; } .show-table .show-item-title { max-width: 320px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .show-item { grid-template-columns: 1fr 1fr 1fr; } .show-item > :nth-child(4), .show-item > :nth-child(5) { display: none; } .show-stats { grid-template-columns: 1fr; } } .assist-whale { font-size: var(--fs-meta); font-weight: 800; margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #2f80ed 16%, var(--surface)); color: #2f80ed; vertical-align: middle; white-space: nowrap; } .assist-whale.tier-1 { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); } .assist-whale.tier-2 { background: color-mix(in srgb, #e0a100 20%, var(--surface)); color: #9a6700; } .rd-nosale, .rd-sale { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; } .rd-nosale { background: color-mix(in srgb, #d0342c 14%, var(--surface)); color: #c22f27; } .rd-sale { background: color-mix(in srgb, #2e9e5b 16%, var(--surface)); color: #23804a; } .rd-nosale-count { color: #c22f27; font-weight: 700; } .wn-headers { width: 100%; min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 8px 10px; border: 1px solid var(--text-3); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; } /* ---------- show reports ---------- */ .rp-list { display: flex; flex-direction: column; gap: 6px; } .rp-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(200px, 2.2fr) repeat(4, minmax(70px, 0.7fr)) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--surface-3); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .12s; } .rp-row:hover { border-color: var(--text-3); } .rp-row .rp-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-row .rp-when { font-size: 12px; color: var(--text-3); } .rp-row .num { text-align: right; font-variant-numeric: tabular-nums; } .rp-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .rp-status.pending { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent-text, var(--text)); } .rp-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .rp-head h3 { margin: 0; font-size: 20px; } .rp-head .rp-sub { color: var(--text-3); font-size: 13px; } .rp-head .rp-actions { margin-left: auto; display: flex; gap: 8px; } .rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; } .rp-card { border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface); padding: 14px 16px; margin-bottom: 12px; } .rp-card h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .rp-card p { margin: 0 0 8px; line-height: 1.5; } .rp-card p:last-child { margin-bottom: 0; } .rp-verdict { font-size: 15px; line-height: 1.55; } .rp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .rp-list-items { margin: 0; padding-left: 18px; } .rp-list-items li { margin: 4px 0; line-height: 1.45; } .rp-plays { counter-reset: play; list-style: none; margin: 0; padding: 0; } .rp-plays li { position: relative; padding: 8px 0 8px 34px; border-top: 1px solid var(--surface-3); } .rp-plays li:first-child { border-top: 0; } .rp-plays li::before { counter-increment: play; content: counter(play); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .rp-plays b { display: block; margin-bottom: 2px; } .rp-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 120px; align-items: end; margin: 6px 0 4px; } .rp-tl-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 2px; } .rp-tl-gmv { background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; } .rp-tl-chat { background: var(--data, var(--text-3)); opacity: .5; border-radius: 2px; min-height: 1px; } .rp-tl-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font-size: 10px; color: var(--text-3); } .rp-legend { font-size: 12px; color: var(--text-3); display: flex; gap: 14px; margin-top: 4px; } .rp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; } .rp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rp-table th, .rp-table td { padding: 6px 8px; border-bottom: 1px solid var(--surface-3); text-align: left; vertical-align: top; } .rp-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 600; } .rp-table td.num, .rp-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .rp-table-wrap { overflow-x: auto; } .rp-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; background: var(--surface-3); color: var(--text-2); } .rp-tag.whale { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--accent-text, var(--text)); } .rp-tag.new { background: color-mix(in srgb, #2fa36b 20%, var(--surface)); color: var(--text); } .rp-series summary { cursor: pointer; display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--surface-3); font-size: 13px; } .rp-series summary .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .rp-series[open] summary { font-weight: 600; } .rp-quote { border-left: 3px solid var(--surface-3); padding: 4px 10px; margin: 4px 0; color: var(--text-2); font-size: 13px; } .rp-quote b { color: var(--text); } .rp-muted { color: var(--text-3); font-size: 12px; } @media print { body * { visibility: hidden !important; } #rpDetail, #rpDetail * { visibility: visible !important; } #rpDetail { position: absolute !important; left: 0; top: 0; width: 100%; padding: 0 12px; } #rpDetail .rp-actions, #rpDetail .rp-series:not([open]) > :not(summary) { display: none !important; } .rp-card { break-inside: avoid; border-color: #ccc; } .rp-timeline .rp-tl-gmv { background: #333 !important; } } /* forecast: what it takes to grow (target slider + lever rows) */ .fc-grow { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--surface-3); } .fc-grow-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .fc-grow-head svg { width: 14px; height: 14px; color: var(--accent); } .fc-grow-target { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; } .fc-grow-big { display: flex; align-items: baseline; gap: 8px; } .fc-target-big { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--accent), var(--accent) 45%, var(--data, var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; } .fc-target-factor { font-size: 12px; } .fc-grow input[type=range] { width: 100%; margin: 8px 0 0; accent-color: var(--accent); height: 16px; } .fc-grow-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 4px; } .fc-grow-label { margin: 16px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .fc-levers { display: flex; flex-direction: column; gap: 6px; } .fc-lever { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 12px; border: 1px solid var(--surface-3); border-radius: 8px; background: color-mix(in srgb, var(--text) 2%, transparent); font-size: 12.5px; } .fc-lever-name { min-width: 150px; font-weight: 600; } .fc-lever-now { color: var(--text-2); font-variant-numeric: tabular-nums; } .fc-lever-arrow { color: var(--text-3); } .fc-lever-need { font-variant-numeric: tabular-nums; } /* price book */ .pb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .pb-room { font-weight: 800; font-size: 15px; } .pb-market { margin-left: auto; font-size: 11px; } .pb-below { color: var(--accent); } .pb-above { color: #2fa36b; } .pb-thin { display: inline-block; margin-left: 6px; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; } .pb-table td:first-child { font-weight: 600; } /* demand board */ .dm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .dm-q { flex: 1 1 260px; min-width: 200px; margin-left: 0; } .dm-table td:first-child { max-width: 520px; } .dm-row { cursor: pointer; } .dm-chev { display: inline-block; width: 14px; color: var(--text-3); font-size: 11px; } .dm-quote { color: var(--text-3); font-style: italic; font-size: 12px; margin-top: 2px; } .dm-quotes { margin: 8px 0 4px 14px; } .dm-asks { color: var(--accent); font-weight: 800; } .dm-own { color: #2fa36b; font-weight: 700; } .dm-rival { color: var(--accent); font-weight: 700; } .dm-pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--surface-3); color: var(--text-2); white-space: nowrap; } .dm-pill.own { border-color: color-mix(in srgb, #2fa36b 45%, transparent); color: #2fa36b; } /* forecast: motion for "what it takes to grow" */ @keyframes fcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes fcPulse { 0% { color: var(--accent); transform: scale(1.06); } 100% { color: inherit; transform: none; } } @keyframes fcSheen { from { background-position: 200% 0; } to { background-position: 0 0; } } .fc-grow { animation: fcIn .4s ease both; } .fc-lever { animation: fcIn .38s ease both; animation-delay: calc(120ms + var(--i, 0) * 70ms); } .fc-lever-need { display: inline-block; transition: color .25s; } .fc-target-big { display: inline-block; background-size: 200% 100%; animation: fcSheen 1.2s ease-out both; } .fc-target-factor { display: inline-block; transform-origin: left center; } .fc-target-factor.fc-pulse { animation: fcPulse .45s ease-out both; } @media (prefers-reduced-motion: reduce) { .fc-grow, .fc-lever, .fc-target-big, .fc-target-factor.fc-pulse { animation: none; } } /* help center */ .help-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; margin-bottom: 22px; border-radius: 16px; border: 1px solid var(--surface-3); background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%), var(--surface); } .help-hero h3 { margin: 0 0 4px; font-size: 20px; } .help-hero p { margin: 0; color: var(--text-2); max-width: 520px; line-height: 1.45; } .help-search { display: flex; align-items: center; gap: 8px; flex: 0 1 320px; min-width: 240px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--surface-3); background: var(--surface-2, var(--surface)); color: var(--text-3); } .help-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .help-search .ic { width: 16px; height: 16px; flex: none; } .help-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; } .help-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px 16px; margin-bottom: 20px; } .help-section { margin-bottom: 20px; min-width: 0; } .help-sections .help-section { margin-bottom: 0; } .help-sections .help-grid { grid-template-columns: 1fr; } .help-card { min-height: 100%; } .help-section-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .help-section-head .ic { width: 14px; height: 14px; color: var(--accent); } .help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .help-card { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--surface-3); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; overflow: hidden; } .help-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity .15s; } .help-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-3)); transform: translateY(-2px); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--accent) 60%, transparent); } .help-card:hover::before { opacity: 1; } .help-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); } .help-ico .ic { width: 18px; height: 18px; } .help-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .help-title { font-weight: 700; line-height: 1.3; } .help-blurb { font-size: 13px; color: var(--text-2); line-height: 1.45; } .help-arrow { margin-left: auto; align-self: center; color: var(--text-3); transition: transform .15s, color .15s; } .help-card:hover .help-arrow { transform: translateX(3px); color: var(--accent); } .help-card-featured { padding: 20px 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 60%); } .help-card-featured .help-ico { width: 44px; height: 44px; } .help-card-featured .help-title { font-size: 17px; } .help-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; counter-reset: hs; } .help-steps span { counter-increment: hs; font-size: 12px; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid var(--surface-3); color: var(--text-2); } .help-steps span::before { content: counter(hs); display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 5px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; } .help-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; } .help-foot-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--surface-3); color: var(--text); text-decoration: none; } .help-foot-card .ic { width: 18px; height: 18px; flex: none; color: var(--text-3); margin-top: 2px; } .help-foot-card b { display: block; margin-bottom: 2px; } .help-foot-card small { color: var(--text-2); font-size: 12.5px; line-height: 1.4; } .help-foot-card code { font-size: 11px; padding: 1px 4px; border-radius: 4px; background: var(--surface-3); } a.help-foot-card:hover { border-style: solid; border-color: var(--text-3); } /* article */ .help-layout { display: grid; grid-template-columns: minmax(0, 720px) 220px; gap: 32px; align-items: start; } @media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-rail { display: none; } } .help-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 18px; color: var(--text-2); text-decoration: none; font-size: 13px; } .help-back .ic { width: 14px; height: 14px; transform: rotate(180deg); } .help-back:hover { color: var(--text); } .help-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .help-eyebrow .ic { width: 14px; height: 14px; } .help-h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; } .help-lede { margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); padding-bottom: 18px; border-bottom: 1px solid var(--surface-3); } .help-prose { line-height: 1.65; font-size: 14.5px; } .help-prose h3 { position: relative; margin: 26px 0 8px; padding-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .help-prose h3::before { content: ''; position: absolute; top: 0; left: 0; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; } .help-prose p { margin: 0 0 10px; } .help-prose ul { margin: 0 0 12px; padding-left: 18px; } .help-prose ul li { margin: 6px 0; padding-left: 4px; } .help-prose ul li::marker { color: var(--accent); } .help-prose li b { color: var(--text); } .help-steps-list { list-style: none; counter-reset: step; margin: 6px 0 14px; padding: 0; } .help-steps-list li { counter-increment: step; position: relative; padding: 8px 0 8px 36px; border-top: 1px solid var(--surface-3); } .help-steps-list li:first-child { border-top: 0; } .help-steps-list li::before { content: counter(step); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; } .help-prose code { font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--surface-3); white-space: nowrap; } .help-prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .help-prose a:hover { border-bottom-color: var(--accent); } .help-tip { display: flex; gap: 10px; align-items: flex-start; border-left: 3px solid var(--accent); padding: 10px 12px; margin-top: 14px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 0 10px 10px 0; } .help-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--surface-3); } .help-nav-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--surface-3); border-radius: 12px; color: var(--text); text-decoration: none; transition: border-color .15s; } .help-nav-card small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); } .help-nav-card:hover { border-color: var(--text-3); } .help-nav-next { text-align: right; align-items: flex-end; } .help-rail { position: sticky; top: 16px; } .help-rail-block { padding: 12px 14px; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface); margin-bottom: 12px; } .help-rail-head { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .help-rail a { display: block; padding: 5px 0 5px 10px; border-left: 2px solid var(--surface-3); margin-left: 2px; color: var(--text-2); font-size: 13px; text-decoration: none; line-height: 1.35; } .help-rail a:hover { color: var(--text); border-left-color: var(--accent); } /* whatnot watchlist, redesigned */ /* ---- Whatnot watchlist as a wall of show cards (2026-09-19) ---- One portrait card per tracked room, built around the show's 9:16 cover art; headline tiles above, then search, status filter and sort. The cover is the loud part; the text under it stays plain. */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wnv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .wnv-kpis:empty { display: none; } .wnv-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; min-width: 0; } .wnv-kpi-label { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12.5px; font-weight: 600; } .wnv-kpi-label .ic { width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: var(--data-soft); color: var(--data); } .wnv-kpi b { display: block; margin-top: 12px; font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .wnv-kpi small { display: block; margin-top: 4px; color: var(--text-3); font-size: 12px; } .wnv-kpi-warn { color: var(--accent-text); display: inline-flex; align-items: center; gap: 5px; } .wnv-kpi-warn .ic { width: 12px; height: 12px; } .wnv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; } .wnv-bar-count { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); margin-right: 2px; } .wnv-bar-count[hidden] { display: none; } .wnv-search { flex: 1 1 220px; min-width: 180px; } .wnv-search input, .wnv-bar select { width: 100%; height: 38px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; } .wnv-bar select { width: auto; padding-right: 28px; cursor: pointer; } .wnv-search input:focus, .wnv-bar select:focus-visible { outline: none; border-color: var(--accent); } .wnv-bar .add-form { flex: 1 1 300px; max-width: 380px; margin-left: auto; } .wnv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 16px; margin-bottom: 22px; } .wnv-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .wnv-card.is-live { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .wnv-cover { position: relative; aspect-ratio: 9 / 16; background: linear-gradient(160deg, hsl(var(--h) 45% 24%), hsl(calc(var(--h) + 40) 50% 12%)); overflow: hidden; } .wnv-card:not(.is-live) .wnv-cover { aspect-ratio: 9 / 11; } .wnv-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } .wnv-card:not(.is-live) .wnv-cover-img { filter: saturate(.75) brightness(.8); } .wnv-cover-blur { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(26px) saturate(1.2) brightness(.55); } .wnv-cover-avatar { position: absolute; left: 50%; top: 44%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } .wnv-cover-mono { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font-size: 44px; font-weight: 800; color: rgba(255, 255, 255, .9); letter-spacing: .02em; } .wnv-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .42) 0, transparent 22%, transparent 52%, rgba(0, 0, 0, .86) 100%); pointer-events: none; } .wnv-cover-top, .wnv-cover-foot { position: absolute; left: 10px; right: 10px; z-index: 1; } .wnv-cover-top { top: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .wnv-cover-foot { bottom: 12px; display: grid; gap: 7px; } .wnv-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wnv-pill b { font-weight: 700; font-variant-numeric: tabular-nums; } .wnv-pill.live b { font-weight: 600; opacity: .85; } .wnv-pill.next b { color: #fff; } .wnv-pill.next { font-weight: 500; color: rgba(255, 255, 255, .8); } .wnv-pill.err { background: color-mix(in srgb, var(--accent) 80%, #000); } .wnv-pill .ic { width: 12px; height: 12px; flex: none; } .wnv-remove { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .12s; backdrop-filter: blur(6px); } .wnv-remove .ic { width: 13px; height: 13px; } .wnv-card:hover .wnv-remove, .wnv-card:focus-within .wnv-remove { opacity: 1; } .wnv-remove:hover { background: var(--accent-solid); } @media (hover: none) { .wnv-remove { opacity: 1; } } .wnv-seller { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wnv-seller img { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255, 255, 255, .8); } .wnv-seller:hover { text-decoration: underline; } .wnv-chips { display: flex; flex-wrap: wrap; gap: 5px; } .wnv-chips span { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .35); color: #fff; font-size: 11px; font-weight: 600; backdrop-filter: blur(6px); } .wnv-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 12px 12px; flex: 1; min-width: 0; } .wnv-title { font-size: 12.5px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wnv-title small { color: var(--text-3); font-weight: 600; } .wnv-money { display: flex; align-items: baseline; gap: 7px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .wnv-money small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--text-3); } .wnv-meta { font-size: 12px; color: var(--text-2); } .wnv-meta.quiet { color: var(--text-3); } .wnv-meta b { color: var(--text); } .wnv-hist { display: grid; gap: 3px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); } .wnv-hist > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 6px; align-items: baseline; } .wnv-hist small { color: var(--text-3); font-size: 11.5px; } .wnv-hist b { color: var(--text); } .wnv-hist a { color: var(--accent-text); } .wnv-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; } .wnv-actions:empty { display: none; } .wnv-actions .btn-table { flex: 1 1 auto; justify-content: center; text-align: center; white-space: nowrap; } @media (max-width: 900px) { .wnv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wnv-kpi b { font-size: 24px; } } @media (max-width: 560px) { .wnv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wnv-bar .add-form { max-width: none; margin-left: 0; } .wnv-money { font-size: 18px; flex-wrap: wrap; } } /* Live Streams bookmark, Saved Sellers banner + empty state, Previous Streams controls and rows (2026-09-19) */ .wnv-kpis.wnv-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wnv-save { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; backdrop-filter: blur(6px); } .wnv-save .ic { width: 15px; height: 15px; } .wnv-save:hover { background: rgba(0, 0, 0, .8); } .wnv-save.on { color: var(--accent); background: rgba(0, 0, 0, .7); } .wnv-save:focus-visible, .wnv-remove:focus-visible { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; } .ss-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 12px; background-image: radial-gradient(420px 160px at 100% 0, var(--data-soft), transparent 70%); } .ss-hero-label { display: block; color: var(--text-2); font-size: 12.5px; font-weight: 600; } .ss-hero b { display: block; margin-top: 8px; font-size: 38px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ss-hero small { display: block; margin-top: 6px; color: var(--text-3); font-size: 12.5px; } .ss-empty { display: grid; justify-items: center; gap: 6px; padding: 54px 20px; text-align: center; color: var(--text-2); } .ss-empty .ic { width: 34px; height: 34px; color: var(--text-3); margin-bottom: 6px; } .ss-empty b { color: var(--text); font-size: 15px; } .ss-empty span { max-width: 46ch; font-size: 13px; } .ss-tiktok-head { margin-top: 26px; } .ps-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; } .ps-bar .wnv-search { flex: 0 1 320px; } .ps-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); } .ps-seg button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer; } .ps-seg button:hover { color: var(--text); } .ps-seg button.active { background: var(--surface-3); color: var(--text); } .ps-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .ps-custom { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; } .ps-custom[hidden] { display: none; } .ps-custom input { height: 34px; padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; color-scheme: dark light; } #psList.is-loading { opacity: .55; transition: opacity .15s; } .ps-rows { display: grid; gap: 6px; } .ps-row { display: grid; grid-template-columns: 46px minmax(0, 2.2fr) minmax(120px, 1fr) minmax(90px, .8fr) minmax(120px, 1fr) minmax(90px, .8fr) auto; align-items: center; gap: 14px; padding: 9px 14px 9px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .ps-row:hover { border-color: var(--border-strong); background: var(--surface-2); } .ps-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .ps-thumb { display: grid; place-items: center; width: 46px; height: 62px; border-radius: 8px; overflow: hidden; font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, .9); background: linear-gradient(160deg, hsl(var(--h) 45% 28%), hsl(calc(var(--h) + 40) 50% 14%)); } .ps-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ps-who { min-width: 0; } .ps-who b, .ps-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-who b { font-size: 13.5px; font-weight: 700; } .ps-row small { color: var(--text-3); font-size: 11.5px; } .ps-cell b { display: block; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .ps-cell small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ps-num { text-align: right; } .ps-num:nth-of-type(4) b { font-size: 15px; font-weight: 800; } .ps-links { display: flex; gap: 10px; font-size: 12px; white-space: nowrap; } .ps-links a { color: var(--text-2); } .ps-links a[data-report] { color: var(--accent-text); } .ps-links a:hover { color: var(--text); } .ps-more { display: block; margin: 14px auto 0; } @media (max-width: 1100px) { .ps-row { grid-template-columns: 46px minmax(0, 2fr) minmax(110px, 1fr) minmax(84px, .8fr) minmax(110px, 1fr); } .ps-hide-sm, .ps-links { display: none; } } @media (max-width: 700px) { .wnv-kpis.wnv-kpis-3 { grid-template-columns: 1fr; } .ps-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; } .ps-when, .ps-row .ps-num:nth-of-type(5) { display: none; } .ss-hero b { font-size: 30px; } } /* Sellers directory + Top Buyers (2026-09-19) */ .sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .sd-card { display: grid; justify-items: center; gap: 4px; padding: 20px 14px 14px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; } .sd-card.is-live { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .sd-avatar { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; margin-bottom: 8px; text-decoration: none; color: rgba(255, 255, 255, .92); font-weight: 800; font-size: 22px; background: linear-gradient(160deg, hsl(var(--h) 45% 30%), hsl(calc(var(--h) + 40) 50% 16%)); } .sd-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .sd-live { position: absolute; top: -4px; right: -22px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: var(--accent-solid); color: #fff; font-size: 10px; font-weight: 800; font-style: normal; white-space: nowrap; } .sd-live .live-dot { width: 5px; height: 5px; background: #fff; } .sd-name { max-width: 100%; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sd-money { font-size: 19px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .sd-meta { font-size: 12px; color: var(--text-2); } .sd-seen { display: inline-flex; align-items: center; gap: 5px; width: 100%; justify-content: center; margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-3); } .sd-seen .ic { width: 12px; height: 12px; } .sd-actions { display: flex; gap: 6px; width: 100%; margin-top: 8px; } .sd-actions .btn-table { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 6px; } .sd-save .ic { width: 13px; height: 13px; } .sd-save.on { color: var(--accent-text); } .sd-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; font-size: 12.5px; color: var(--text-2); } .sd-pager b { color: var(--text); margin: 0 4px; } .tb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; } .tb-filters { display: flex; gap: 8px; } .tb-filters select { height: 38px; padding: 0 28px 0 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; max-width: 260px; } .tb-table { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .tb-row { display: grid; grid-template-columns: 34px minmax(0, 2fr) minmax(120px, 1.1fr) minmax(100px, .9fr) minmax(0, 1.5fr) 110px 58px; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--border); cursor: pointer; } .tb-row:first-child { border-top: 0; } .tb-row[data-buyer]:hover { background: var(--surface-2); } .tb-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .tb-headrow { cursor: default; padding-top: 9px; padding-bottom: 9px; font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--surface-2); } .tb-rank { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; } .tb-who { display: flex; align-items: center; gap: 9px; min-width: 0; } .tb-who b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; background: hsl(var(--h) 55% 42%); } .tb-whale { font-style: normal; font-size: 13px; } .tb-yours { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(61, 220, 151, .16); color: #3ddc97; } .tb-cell b { display: block; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-cell small { display: block; color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-num { text-align: right; } .tb-move { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; } .tb-move .ic { width: 13px; height: 13px; } .tb-move.up { color: #3ddc97; } .tb-move.down { color: var(--accent-text); } .tb-move.new { color: var(--data); } .tb-spark { display: block; } .tb-spark.up { color: #3ddc97; } .tb-spark.down { color: var(--accent-text); } .tb-act { display: flex; gap: 8px; justify-content: flex-end; align-items: center; } .tb-act a, .tb-act button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); text-decoration: none; cursor: pointer; font-size: 13px; } .tb-act .ic { width: 13px; height: 13px; } .tb-act a:hover, .tb-act button:hover { background: var(--surface-3); color: var(--text); } #tbList.is-loading { opacity: .55; transition: opacity .15s; } @media (max-width: 1100px) { .tb-row { grid-template-columns: 30px minmax(0, 2fr) minmax(110px, 1fr) minmax(96px, .9fr) minmax(0, 1.3fr); } .tb-trend, .tb-act, .tb-headrow span:nth-child(n+6) { display: none; } } @media (max-width: 700px) { .tb-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; } .tb-row .tb-cell:not(.tb-num), .tb-headrow span:nth-child(3), .tb-headrow span:nth-child(5) { display: none; } .sd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } /* Sizing pass for the Competitors screens (2026-09-19): fit a laptop window. Covers are 2:3 (Whatnot's own ratio, 642x992), a live card is ~430px instead of ~700px, tiles are one compact row, and lists get tighter rows. Overrides the blocks above. */ .wnv-kpis { gap: 10px; margin-bottom: 12px; } .wnv-kpi { padding: 11px 14px 12px; border-radius: 14px; } .wnv-kpi-label { gap: 7px; font-size: 12px; } .wnv-kpi-label .ic { width: 22px; height: 22px; padding: 4px; border-radius: 7px; } .wnv-kpi b { margin-top: 6px; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wnv-kpi small { margin-top: 2px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wnv-toprow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr); gap: 10px; margin-bottom: 12px; align-items: stretch; } .wnv-toprow .ss-hero, .wnv-toprow .wnv-kpis { margin-bottom: 0; } .ss-hero { padding: 11px 14px 12px; border-radius: 14px; } .ss-hero-label { font-size: 12px; line-height: 22px; } .ss-hero b { margin-top: 6px; font-size: 22px; } .ss-hero small { margin-top: 2px; font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wnv-bar, .ps-bar { margin-bottom: 10px; } .wnv-search input, .wnv-bar select, .tb-filters select { height: 34px; font-size: 12.5px; } .wnv-bar .add-form input, .wnv-bar .add-form button { height: 34px; padding-top: 0; padding-bottom: 0; } .wnv-grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 12px; margin-bottom: 18px; } .wnv-card { border-radius: 14px; } .wnv-cover { aspect-ratio: 2 / 3; } .wnv-card:not(.is-live) .wnv-cover { aspect-ratio: 1 / 1; } .wnv-cover-top { top: 8px; left: 8px; right: 8px; } .wnv-cover-foot { left: 9px; right: 9px; bottom: 9px; gap: 5px; } .wnv-pill { padding: 3px 8px; font-size: 11px; } .wnv-save { width: 26px; height: 26px; } .wnv-save .ic { width: 14px; height: 14px; } .wnv-seller { font-size: 13px; gap: 6px; } .wnv-seller img { width: 19px; height: 19px; } .wnv-chips { flex-wrap: nowrap; overflow: hidden; } .wnv-chips span { flex: none; padding: 2px 8px; font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wnv-chips span + span { flex: 0 1 auto; min-width: 0; } .wnv-body { gap: 3px; padding: 9px 10px 10px; } .wnv-title { font-size: 12px; } .wnv-money { font-size: 18px; gap: 6px; } .wnv-money small { font-size: 11px; } .wnv-meta { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wnv-hist { gap: 2px; margin-top: 3px; padding-top: 6px; font-size: 11.5px; } .wnv-hist > div { grid-template-columns: 50px minmax(0, 1fr); gap: 0 4px; } .wnv-hist span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wnv-hist small { font-size: 11px; } .wnv-actions { flex-wrap: nowrap; gap: 5px; padding-top: 7px; } .wnv-actions .btn-table { flex: 1 1 0; min-width: 0; padding: 5px 4px; font-size: 11.5px; gap: 4px; overflow: hidden; } .wnv-actions .btn-table .ic { width: 12px; height: 12px; flex: none; } .sd-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; } .sd-card { padding: 14px 12px 12px; gap: 3px; border-radius: 14px; } .sd-avatar { width: 58px; height: 58px; margin-bottom: 5px; font-size: 18px; } .sd-live { top: -5px; right: -26px; } .sd-name { font-size: 13px; } .sd-money { font-size: 17px; } .sd-meta { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sd-seen { margin-top: 4px; padding-top: 7px; font-size: 11px; white-space: nowrap; overflow: hidden; } .sd-actions { margin-top: 6px; } .sd-actions .btn-table { padding: 5px 6px; font-size: 11.5px; } .ps-rows { gap: 5px; } .ps-row { grid-template-columns: 36px minmax(0, 2.2fr) minmax(120px, 1fr) minmax(90px, .8fr) minmax(120px, 1fr) minmax(90px, .8fr) auto; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 10px; } .ps-thumb { width: 36px; height: 48px; border-radius: 6px; font-size: 12px; } .ps-who b, .ps-cell b { font-size: 13px; } .ps-num:nth-of-type(4) b { font-size: 14px; } .tb-row { padding: 7px 14px; gap: 12px; } .tb-headrow { padding-top: 7px; padding-bottom: 7px; } .tb-avatar { width: 24px; height: 24px; font-size: 11px; } .tb-spark { height: 22px; } .wnv-chips span { font-size: 10px; padding: 2px 5px; letter-spacing: -.01em; } .wnv-chips { gap: 3px; } .wnv-cover-foot { left: 7px; right: 7px; } .wnv-bar .wnv-search { flex: 1 1 140px; min-width: 120px; } .wnv-bar .add-form { flex: 0 1 290px; min-width: 220px; max-width: 290px; margin-left: 0; } .wnv-hist > div { grid-template-columns: 54px minmax(0, 1fr); } .wnv-hist small { white-space: nowrap; } .ps-bar-one { justify-content: flex-start; } .ps-bar-one .wnv-search { flex: 1 1 200px; } .ps-seg button { padding: 5px 11px; } .sd-avatar { overflow: hidden; } .sd-avatar img { width: 58px; height: 58px; } .sd-card .sd-avatar { overflow: visible; } .sd-avatar img { clip-path: circle(50%); } @media (min-width: 900px) { .tb-head { flex-wrap: nowrap; align-items: flex-start; } .tb-head > div:first-child { flex: 1; min-width: 0; } .tb-filters { flex: none; padding-top: 2px; } } /* nothing to compare with yet: the Movement column would be all dashes, so it is left out */ .tb-table.no-move .tb-row { grid-template-columns: 34px minmax(0, 2.4fr) minmax(100px, .9fr) minmax(0, 1.6fr) 110px 58px; } .tb-table.no-move .tb-row > :nth-child(3) { display: none; } @media (max-width: 1100px) { .tb-table.no-move .tb-row { grid-template-columns: 30px minmax(0, 2fr) minmax(96px, .9fr) minmax(0, 1.3fr); } } @media (max-width: 700px) { .tb-table.no-move .tb-row { grid-template-columns: 26px minmax(0, 1fr) auto; } } /* the TikTok / Whatnot switch rides on the title row instead of taking a row of its own */ @media (min-width: 900px) { #view-watchlist { position: relative; } #view-watchlist .wl-switch { position: absolute; top: 2px; right: 0; margin: 0; } #view-watchlist .stats-header { margin-bottom: 14px; padding-right: 250px; } } @media (max-width: 1100px) { .ps-row { grid-template-columns: 36px minmax(0, 2fr) minmax(110px, 1fr) minmax(84px, .8fr) minmax(110px, 1fr); } } @media (max-width: 900px) { .wnv-toprow { grid-template-columns: 1fr; } .wnv-kpi b, .ss-hero b { font-size: 20px; } } @media (max-width: 700px) { .ps-row { grid-template-columns: 36px minmax(0, 1fr) auto; } } @media (max-width: 560px) { .wnv-grid, .sd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .wnv-kpis, .wnv-kpis.wnv-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wnr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 8px; } .wnr-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; } .wnr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--surface-3); color: var(--text-2); } .wnr-chip.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--text); } .wnr-chip.warn { color: var(--accent); } .wnr-chip .ic { width: 12px; height: 12px; } .wnr-tile { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: hsl(var(--h) 60% 30%); background: hsl(var(--h) 70% 88%); } :root[data-theme="dark"] .wnr-tile, :root:not([data-theme]) .wnr-tile { color: hsl(var(--h) 80% 82%); background: hsl(var(--h) 45% 24%); } .wnr-tile.big { width: 44px; height: 44px; border-radius: 12px; font-size: 14px; } .wnr-tile.has-img { background: var(--surface-3); overflow: hidden; } .wnr-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .wnr-name { font-weight: 800; color: var(--text); text-decoration: none; } .wnr-name:hover { color: var(--accent); } .wnr-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 18px; } .wnr-live { position: relative; padding: 16px 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--surface-3)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 55%); } .wnr-live-head { display: flex; align-items: center; gap: 12px; } .wnr-live-who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .wnr-live-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); } .wnr-live-sub .ic { width: 13px; height: 13px; vertical-align: -2px; } .wnr-badge-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--accent); } .wnr-live-title { margin: 12px 0 10px; font-size: 14px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wnr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .wnr-stats > div { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); } .wnr-stats b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; } .wnr-stats small { display: block; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; } .wnr-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .wnr-actions .btn-table { text-decoration: none; } .wnr-actions .ic { width: 13px; height: 13px; vertical-align: -2px; } .wnr-live-note { margin-top: 8px; font-size: 12px; color: var(--text-3); } .wnr-live-hist { display: grid; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); font-size: 12.5px; color: var(--text-2); } .wnr-live-hist span { display: flex; gap: 10px; align-items: baseline; min-width: 0; } .wnr-live-hist small { flex: 0 0 68px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); } .wnr-live-hist b { color: var(--text); } .wnr-live-hist a { color: var(--accent); text-decoration: none; } .wnr-live-hist a:hover { text-decoration: underline; } .wnr-remove { border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 13px; padding: 4px; } .wnr-remove:hover { color: var(--accent); } .wnr-next { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; } .wnr-next-day { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 8px 0 2px; } .wnr-next-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--surface-3); background: var(--surface); } .wnr-next-when { flex: none; width: 74px; display: flex; flex-direction: column; line-height: 1.2; } .wnr-next-when b { font-size: 13px; } .wnr-next-when small { font-size: 11px; color: var(--text-3); } .wnr-next-title { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wnr-rows { display: flex; flex-direction: column; gap: 6px; } .wnr-row { display: grid; grid-template-columns: 30px minmax(150px, 1.2fr) minmax(120px, .9fr) minmax(180px, 1.4fr) minmax(150px, 1.1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--surface-3); background: var(--surface); } .wnr-row.is-live { border-color: color-mix(in srgb, var(--accent) 40%, var(--surface-3)); } .wnr-row-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wnr-row-sub { font-size: 12px; color: var(--text-2); } .wnr-status { color: var(--text-3); } .wnr-format { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); background: color-mix(in srgb, var(--text) 7%, transparent); } .wnr-status.next b { color: var(--text); } .wnr-status.err { color: var(--accent); } .wnr-status .ic { width: 12px; height: 12px; vertical-align: -2px; } .wnr-row-cell { min-width: 0; font-size: 12.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 1px; } .wnr-row-cell small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); } .wnr-row-cell b { color: var(--text); } .wnr-row-cell a { color: var(--accent); text-decoration: none; } .wnr-row-cell a:hover { text-decoration: underline; } .wnr-row-actions { display: flex; align-items: center; gap: 6px; } @media (max-width: 760px) { .wnr-row { grid-template-columns: 30px 1fr auto; } .wnr-row-cell { display: none; } .wnr-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1100px) { .wnr-row { grid-template-columns: 30px minmax(150px, 1.2fr) minmax(180px, 1.4fr) minmax(150px, 1.1fr) auto; } .wnr-row-followers { display: none; } } .wnr-up { color: #2fa36b; } .wnr-down { color: var(--accent); } .show-shelf { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -2px 0 12px; font-size: 12.5px; color: var(--text-2); } .show-shelf a { color: var(--accent); text-decoration: none; } .show-shelf a:hover { text-decoration: underline; } .show-prem { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .show-watch-line { font-size: 13px; margin: 4px 0 8px; } .show-watch-bar { display: flex; gap: 3px; height: 34px; margin-bottom: 8px; } .show-watch-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 46px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 22%, var(--surface-3)); font-size: 12px; font-weight: 700; line-height: 1.1; } .show-watch-seg small { font-size: 9.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; } .show-watch .rp-muted { font-size: 12px; } /* whatnot extension pairing */ .wn-ext-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .wn-ext-code { font-size: 26px; font-weight: 900; letter-spacing: .18em; font-variant-numeric: tabular-nums; cursor: pointer; padding: 4px 0; } .wn-ext-code-empty { color: var(--text-3); cursor: default; letter-spacing: .1em; } .wn-ext-actions { display: flex; flex-wrap: wrap; gap: 8px; } .wn-ext-actions a { text-decoration: none; } .wn-ext-steps { margin: 10px 0 8px; padding-left: 20px; } .wn-ext-steps li { margin: 5px 0; line-height: 1.45; font-size: 13px; } .wn-ext code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--surface-3); cursor: pointer; } /* ---- show page (redesign 2026-09-13): header, KPI strip, sub-tabs ---- */ .sh-head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .sh-head-row .sh-report { margin-left: auto; } .show-head.sh-head #showBack { margin-bottom: 0; } .sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; } .sh-kpis .hc-value.sh-up { color: #2fa36b; } .sh-kpis .hc-value.sh-down { color: var(--accent); } .sh-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--surface-3); } .sh-tab { appearance: none; border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .sh-tab:hover { color: var(--text); } .sh-tab.on { color: var(--text); border-bottom-color: var(--accent); } .sh-card { padding: 12px 14px; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface); } .sh-card + .sh-card, .sh-grid + .sh-card { margin-top: 10px; } .sh-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 8px; } .sh-card-head .rp-muted { text-transform: none; letter-spacing: 0; font-weight: 500; } .sh-card .show-timeline { margin-bottom: 4px; border: 0; padding: 0; height: 64px; background: none; } .show-bar.peak { opacity: 1; background: color-mix(in srgb, var(--accent) 70%, #fff); } .sh-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); } .sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; } .sh-big { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; } .sh-big small { font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 6px; } .sh-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--text-2); margin-top: 8px; } .sh-facts b { color: var(--text); } .sh-facts-row { font-size: 14px; gap: 6px 22px; margin: 2px 0 10px; } .sh-note { font-size: 12px; color: var(--text-3); margin-top: 8px; } .sh-mix { display: grid; gap: 6px; } .sh-mix-row { display: grid; grid-template-columns: 84px 1fr 72px 36px; align-items: center; gap: 8px; font-size: 12.5px; } .sh-mix-row b { text-align: right; font-variant-numeric: tabular-nums; } .sh-mix-row small { color: var(--text-3); text-align: right; } .sh-mix-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; } .sh-mix-bar > div { height: 100%; background: var(--accent); border-radius: 4px; } .sh-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-3); background: color-mix(in srgb, var(--text) 7%, transparent); vertical-align: 1px; } .sh-tag.up { color: #2fa36b; background: color-mix(in srgb, #2fa36b 14%, transparent); } .sh-tag.down { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .sh-sets { display: grid; gap: 10px; } .sh-set-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .sh-set-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sh-progress { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; margin-bottom: 10px; } .sh-progress > div { height: 100%; background: var(--accent); border-radius: 4px; } .sh-set-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; } .sh-set-stats > div { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); } .sh-set-stats b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; } .sh-set-stats b small { font-size: 11px; color: var(--text-3); font-weight: 600; } .sh-set-stats span { display: block; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; } .sh-pulls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .sh-pulls small { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; } .sh-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .sh-filter input { flex: 1 1 200px; min-width: 160px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--surface-3); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; } .sh-chips { display: flex; flex-wrap: wrap; gap: 4px; } .sh-chip { appearance: none; border: 1px solid var(--surface-3); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; } .sh-chip.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .show-table-wrap.tall { max-height: 56vh; margin-top: 0; } .show-table a { color: inherit; font-weight: 600; text-decoration: none; } .show-table a:hover { text-decoration: underline; } /* ---- premium over spot: range bars ---- */ .pm-scale { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 2fr) minmax(110px, 1fr) minmax(110px, 1fr); gap: 12px; font-size: 10.5px; color: var(--text-3); margin: 6px 0 2px; } .pm-scale > span:first-child { grid-column: 2; } .pm-scale > span:nth-child(2) { grid-column: 2; text-align: center; } .pm-scale > span:last-child { grid-column: 2; text-align: right; } .pm-scale { grid-auto-flow: row; } .pm-scale > span { grid-row: 1; } .pm-rows { display: grid; gap: 6px; } .pm-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 2fr) minmax(110px, 1fr) minmax(110px, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 3%, transparent); } .pm-form b { display: block; font-size: 13.5px; } .pm-form small, .pm-money small { display: block; font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-money b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; } .pm-range { position: relative; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--text) 5%, transparent); overflow: visible; } .pm-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-3); opacity: .6; } .pm-band { position: absolute; top: 7px; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 35%, transparent); } .pm-med { position: absolute; top: 3px; height: 20px; width: 3px; border-radius: 2px; background: var(--accent); transform: translateX(-1px); } .pm-med.up { background: #2fa36b; } .pm-med span { position: absolute; top: -1px; left: 7px; font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--text); } .pm-thin { margin-top: 10px; font-size: 12px; } @media (max-width: 720px) { .pm-row, .pm-scale { grid-template-columns: 1fr; gap: 6px; } .pm-scale { display: none; } } /* ---- Settings as a screen (2026-09-13): page head, a row of tabs, the panes below ---- */ .settings-page { max-width: 1080px; } .settings-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .settings-head p { margin: 0; } .settings-me { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .settings-me-avatar { width: 34px; height: 34px; font-size: 13px; } .settings-me-name { font-weight: 700; font-size: 13px; } .settings-me-role { font-size: 11.5px; color: var(--text-3); } .settings-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tabs .settings-nav-btn { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; margin-bottom: -1px; cursor: pointer; } .settings-tabs .settings-nav-btn:hover { color: var(--text); background: none; } .settings-tabs .settings-nav-btn.active { color: var(--text); background: none; border-bottom-color: var(--accent); } .settings-tab-sep { flex: none; width: 1px; margin: 10px 8px; background: var(--border); } .settings-page .settings-content { padding: 0; overflow: visible; min-height: 0; } .settings-page .settings-pane.active { animation: fadeIn .18s ease; } @media (max-width: 760px) { .settings-head { align-items: flex-start; } .settings-me { display: none; } } /* ---- show signals + room strip ---- */ .sh-spark { display: block; width: 100%; height: 44px; margin: 4px 0 6px; } .sh-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; } .sh-mini { display: grid; gap: 3px; margin: 6px 0 4px; font-size: 12.5px; } .sh-mini-head, .sh-mini-row { display: grid; grid-template-columns: 1.3fr .8fr .6fr 1fr; gap: 8px; } .sh-mini-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); } .sh-mini-row { padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .sh-mini-row span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; } .sh-room-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 12px 0 14px; } .sh-room-strip .sh-big { font-size: 20px; } .sh-quote { margin-top: 8px; font-size: 12.5px; color: var(--text-2); font-style: italic; } /* ---- paused workspaces ---- */ .ws-row.is-paused .ws-name { color: var(--text-3); } .ws-row.is-paused .ws-ico { opacity: .55; } .ws-foot-warn { color: var(--accent); } .ws-paused-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--surface-3)); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); font-size: 13px; color: var(--text-2); } .ws-paused-bar b { color: var(--text); } .ws-paused-bar[hidden] { display: none; } /* ---- Ask FlipOS: its own screen, with motion ---- */ .ask-wrap { max-width: 900px; margin: 0 auto; } .ask-hero { text-align: center; padding: 18px 0 22px; transition: padding .45s ease; } .ask-orb-big { position: relative; width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 35%, #000) 100%); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 12%, transparent), 0 18px 50px color-mix(in srgb, var(--accent) 45%, transparent); animation: askFloat 5s ease-in-out infinite; transition: width .45s ease, height .45s ease, margin .45s ease; } .ask-orb-big::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); animation: askRing 3.2s ease-out infinite; } .ask-orb-big::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); animation: askRing 3.2s ease-out infinite 1.6s; } .ask-orb-big span { width: 26px; height: 26px; border-radius: 50%; background: #fff; opacity: .9; filter: blur(1px); animation: askPulse 2.4s ease-in-out infinite; } .ask-title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; } .ask-title em { font-style: normal; background: linear-gradient(90deg, var(--accent) 0%, #fff 50%, var(--accent) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: askShimmer 6s linear infinite; } .ask-sub { margin: 8px auto 0; max-width: 56ch; color: var(--text-2); font-size: 14px; } .ask-wrap.has-thread .ask-hero { padding: 6px 0 14px; } .ask-wrap.has-thread .ask-orb-big { width: 40px; height: 40px; margin-bottom: 8px; } .ask-wrap.has-thread .ask-orb-big span { width: 14px; height: 14px; } .ask-wrap.has-thread .ask-title { font-size: 22px; } .ask-wrap.has-thread .ask-sub { display: none; } .ask-card { position: relative; border-radius: 18px; background: var(--surface); padding: 14px 16px; overflow: hidden; animation: askRise .6s cubic-bezier(.2,.7,.2,1) both .1s; } .ask-card::before { content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1px; pointer-events: none; background: conic-gradient(from var(--ask-angle, 0deg), color-mix(in srgb, var(--accent) 70%, transparent), transparent 30%, color-mix(in srgb, var(--accent) 35%, transparent) 55%, transparent 80%, color-mix(in srgb, var(--accent) 70%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: askSpin 9s linear infinite; } @property --ask-angle { syntax: ''; inherits: false; initial-value: 0deg; } .ask-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--surface-3); } .ask-head > div { flex: 1; min-width: 0; font-size: 13.5px; } .ask-orb { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, var(--surface-3)); color: var(--accent); font-size: 16px; } .ask-thread { max-height: 58vh; overflow-y: auto; padding: 14px 2px 6px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; } .ask-msg { display: flex; gap: 10px; align-items: flex-start; animation: askIn .45s cubic-bezier(.2,.7,.2,1) both; } .ask-av { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--surface-3); color: var(--text-2); margin-top: 2px; } .ask-av.bot { background: color-mix(in srgb, var(--accent) 18%, var(--surface-3)); color: var(--accent); } .ask-msg.is-new .ask-av.bot { animation: askPulse 1.6s ease-in-out 2; } .ask-bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: 13.5px; line-height: 1.55; } .ask-msg.me .ask-bubble { background: color-mix(in srgb, var(--accent) 12%, transparent); border-bottom-left-radius: 4px; } .ask-msg.bot .ask-bubble { border-top-left-radius: 4px; } .ask-bubble p { margin: 0 0 6px; } .ask-bubble p:last-child { margin-bottom: 0; } .ask-bubble ul { margin: 4px 0 8px; padding-left: 18px; } .ask-bubble li { margin: 3px 0; } .ask-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 10px 0 4px; } .ask-views { margin-top: 8px; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; } .ask-reveal { animation: askIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms); } .ask-typing { display: flex; gap: 5px; align-items: center; height: 22px; padding: 0 14px; } .ask-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: askDot 1.2s infinite ease-in-out; } .ask-typing span:nth-child(2) { animation-delay: .2s; } .ask-typing span:nth-child(3) { animation-delay: .4s; } .ask-form { display: flex; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--surface-3); } .ask-form input, .ask-form textarea { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--surface-3); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; transition: border-color .2s, box-shadow .25s; } .ask-form input:focus, .ask-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .ask-send { position: relative; overflow: hidden; border: 0; border-radius: 12px; padding: 0 20px; font: inherit; font-weight: 700; font-size: 14px; color: #fff; cursor: pointer; background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); transition: transform .15s, box-shadow .2s; } .ask-send:hover { transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent); } .ask-send:disabled { cursor: default; opacity: .85; } .ask-send.is-busy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%); background-size: 200% 100%; animation: askShimmer 1.2s linear infinite; } .ask-try, .ask-history { margin-top: 18px; } .ask-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 8px; } .ask-chip { appearance: none; text-align: left; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--surface-3); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; display: flex; gap: 8px; align-items: flex-start; animation: askIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + .25s); transition: transform .18s, border-color .18s, box-shadow .2s, color .18s; } .ask-chip:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--text); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 22%, transparent); } .ask-chip-spark { color: var(--accent); flex: none; } .ask-chip small { color: var(--text-3); white-space: nowrap; margin-left: auto; } .nav-item[data-nav-id="ask"] { color: var(--text); } .nav-item[data-nav-id="ask"] svg { opacity: 1; color: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); animation: askTwinkle 3.5s ease-in-out infinite; } @keyframes askFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes askRing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes askPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: 1; } } @keyframes askShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes askSpin { to { --ask-angle: 360deg; } } @keyframes askIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes askRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes askDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } @keyframes askTwinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(12deg); } } @media (prefers-reduced-motion: reduce) { .ask-orb-big, .ask-orb-big::before, .ask-orb-big::after, .ask-orb-big span, .ask-title em, .ask-card::before, .ask-msg, .ask-reveal, .ask-chip, .ask-card, .nav-item[data-nav-id="ask"] svg { animation: none !important; } } /* ---- Ask drawer + top bar sparkle ---- */ .topbar-ask { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--surface-3)); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .2s; } .topbar-ask:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); } .topbar-ask::first-letter { color: var(--accent); } .ask-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 60; backdrop-filter: blur(2px); } .ask-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 94vw); z-index: 61; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--surface-3); box-shadow: -20px 0 60px rgba(0,0,0,.35); transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.7,.2,1); } .ask-drawer.open { transform: translateX(0); } .ask-drawer[hidden] { display: none; } .ask-drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--surface-3); } .ask-drawer-title { flex: 1; min-width: 0; font-size: 14px; } .ask-ctx-pill { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ask-drawer-close { position: static; } .ask-drawer-thread { flex: 1; max-height: none; padding: 14px 16px 6px; } .ask-drawer-chips { grid-template-columns: 1fr; gap: 6px; padding: 0 16px 8px; margin: 0; } .ask-drawer-chips .ask-chip { padding: 8px 11px; border-radius: 10px; font-size: 12.5px; } .ask-drawer .ask-form { margin: 0; padding: 10px 16px 14px; } .ask-drawer .ask-bubble { max-width: 90%; } .sh-head-spacer { flex: 1; } .ask-ctx-btn { white-space: nowrap; } .show-head h3 .ask-ctx-btn { margin-left: 8px; vertical-align: middle; font-weight: 600; } @media (max-width: 760px) { .topbar-ask span { display: none; } .topbar-ask { padding: 6px 9px; } } /* ---- shop brain ---- */ .ask-brain { margin-top: 18px; } .ask-brain-card { border: 1px solid var(--surface-3); border-radius: 16px; background: var(--surface); } .ask-brain-card summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; } .ask-brain-card summary::-webkit-details-marker { display: none; } .ask-brain-card summary > div { flex: 1; min-width: 0; font-size: 13.5px; } .ask-brain-caret { color: var(--text-3); transition: transform .2s; font-size: 18px; } .ask-brain-card[open] .ask-brain-caret { transform: rotate(90deg); } .ask-brain-new { color: var(--accent); font-weight: 700; } .ask-brain-body { padding: 0 16px 16px; border-top: 1px solid var(--surface-3); } .ask-brain-section { margin-top: 14px; } .ask-brain-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 14px; } .ask-brain-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-3); } .ask-brain-field textarea { resize: vertical; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--surface-3); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; } .ask-brain-field textarea:focus { outline: none; border-color: var(--accent); } .ask-brain-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; } .ask-brain-actions .ask-send { padding: 9px 16px; } .ask-fact { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 13px; margin-top: 6px; } .ask-fact.proposed { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); } .ask-fact-actions { display: flex; gap: 6px; flex: none; } .ask-fact-add { display: flex; gap: 8px; margin-top: 8px; } .ask-fact-add input { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--surface-3); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; } .ask-proposal .ask-fact { margin-top: 6px; } /* ---- drafts (actions the answer proposes) ---- */ .ask-actions { display: grid; gap: 8px; margin-top: 10px; } .ask-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--surface-3)); background: color-mix(in srgb, var(--accent) 7%, transparent); } .ask-action.done { border-style: solid; border-color: color-mix(in srgb, #2fa36b 45%, var(--surface-3)); background: color-mix(in srgb, #2fa36b 8%, transparent); } .ask-action.dropped { opacity: .55; } .ask-action-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .ask-action-main small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); font-weight: 800; } .ask-action-main b { overflow: hidden; text-overflow: ellipsis; } .ask-action-main .rp-muted { font-size: 12px; } .ask-action-body summary { cursor: pointer; font-size: 12px; color: var(--accent); } .ask-action-body pre { white-space: pre-wrap; font: inherit; font-size: 12.5px; margin: 6px 0 0; max-height: 240px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--text) 5%, transparent); } .ask-confirm { padding: 8px 14px; font-size: 13px; } .ask-action-state { font-size: 12px; font-weight: 700; color: var(--text-2); } /* ---- documents ---- */ .ask-docs { margin-top: 12px; } .ask-docs-list { margin-top: 12px; } .ask-docs-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; padding: 18px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--surface-3)); border-radius: 12px; cursor: pointer; text-align: center; font-size: 13px; color: var(--text-2); transition: background .15s, border-color .15s; } .ask-docs-drop:hover, .ask-docs-drop.is-over { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); } .ask-sources { margin-top: 6px; font-size: 11.5px; color: var(--text-3); } .ask-sources a { color: var(--accent); text-decoration: none; } .ask-sources a:hover { text-decoration: underline; } /* ---- streaming ---- */ .ask-phase { margin-left: 8px; font-style: normal; font-size: 12px; color: var(--text-3); } .ask-msg.is-streaming .ask-bubble > *:last-child::after { content: '▍'; margin-left: 2px; color: var(--accent); animation: askBlink 1s steps(2) infinite; } @keyframes askBlink { 50% { opacity: 0; } } /* ---- smooth streaming: no relayout jumps, gentle scroll ---- */ .ask-thread { overflow-anchor: none; } .ask-msg.is-streaming .ask-bubble { transition: none; } .ask-msg.is-streaming .ask-bubble > * { animation: none !important; } .ask-status .ask-typing { min-width: 120px; } /* ---- profile pictures in the chat: rooms as @mentions, your own avatar on your messages ---- */ .ask-mention { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 2px; margin: 0 1px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-3)); color: var(--text-1); font-weight: 600; font-size: .94em; line-height: 1.5; vertical-align: -3px; white-space: nowrap; transition: background .15s, transform .15s; } .ask-mention:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface-3)); transform: translateY(-1px); } .ask-mention img, .ask-mention i { width: 18px; height: 18px; border-radius: 50%; flex: none; object-fit: cover; } .ask-mention i { display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; background: hsl(var(--h, 0) 55% 45%); } .ask-chip .ask-mention { padding-right: 6px; font-size: .92em; } .ask-av.has-img { overflow: hidden; background: var(--surface-3); } .ask-av.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; } #askDrawerCtx .ask-mention { vertical-align: -4px; } .ask-chip-text { flex: 1 1 auto; min-width: 0; line-height: 1.45; } .ask-mention { padding-right: 7px; margin: 0; } .ask-chip .ask-mention img, .ask-chip .ask-mention i { width: 16px; height: 16px; } /* ---- @mentions: Discord-style pill (no picture), picker while typing, highlighted inside the draft ---- */ .ask-mention { display: inline; padding: 1px 4px; margin: 0; border-radius: 4px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: color-mix(in srgb, var(--accent) 70%, var(--text)); font-weight: 600; font-size: inherit; line-height: inherit; vertical-align: baseline; white-space: nowrap; transition: background .15s; } .ask-mention:hover { background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--text); transform: none; } .ask-mention img, .ask-mention i { display: none; } .ask-input-wrap { position: relative; flex: 1; display: flex; min-width: 0; } .ask-input-wrap input { width: 100%; } .ask-input-mirror { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; border-style: solid; border-color: transparent; color: transparent; white-space: pre; box-sizing: border-box; } .ask-input-mirror > span { display: inline-block; white-space: pre; will-change: transform; } .ask-input-wrap.has-mention input { color: transparent; caret-color: var(--text); } .ask-input-wrap.has-mention .ask-input-mirror { color: var(--text); } .ask-input-mirror .ask-mention { padding-top: 0; padding-bottom: 0; } .ask-form input::placeholder, .ask-form textarea::placeholder { color: var(--text-3); } .ask-mention-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30; padding: 6px; border-radius: 12px; border: 1px solid var(--surface-3); background: var(--surface); box-shadow: 0 18px 48px rgba(0,0,0,.45); animation: askIn .18s cubic-bezier(.2,.7,.2,1) both; } .ask-mention-head { padding: 6px 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .ask-mention-row { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .ask-mention-row:hover, .ask-mention-row.is-active { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); } .ask-mention-row small { color: var(--text-3); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; } .ask-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .ask-chip .ask-mention { padding: 1px 4px; font-size: inherit; } #askDrawerCtx .ask-mention { vertical-align: baseline; } /* inside the draft the pill must not change glyph widths, or the caret drifts away from the text */ .ask-input-mirror .ask-mention { padding: 0; margin: 0; font-weight: inherit; border-radius: 3px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--accent) 22%, transparent); } .ask-mention-menu { background: color-mix(in srgb, var(--surface) 88%, var(--bg)); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); z-index: 60; } /* ---- channel preview card ---- */ .ask-mention { cursor: pointer; } .ask-input-mirror .ask-mention { cursor: text; } .ask-peek { position: fixed; z-index: 220; padding: 14px; border-radius: 16px; border: 1px solid var(--surface-3); background: color-mix(in srgb, var(--surface) 92%, var(--bg)); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .18s, transform .22s cubic-bezier(.2,.7,.2,1); } .ask-peek.is-above { transform: translateY(-6px) scale(.98); } .ask-peek.open { opacity: 1; transform: none; } .ask-peek-loading { display: flex; gap: 6px; justify-content: center; padding: 22px 0; } .ask-peek-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: askDot 1.2s infinite ease-in-out; } .ask-peek-loading span:nth-child(2) { animation-delay: .2s; } .ask-peek-loading span:nth-child(3) { animation-delay: .4s; } .ask-peek-head { display: flex; gap: 12px; align-items: center; } .ask-peek-head > div { min-width: 0; display: grid; gap: 2px; } .ask-peek-head b { font-size: 16px; letter-spacing: -.01em; } .ask-peek-head small { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; } .ask-peek-av { flex: none; width: 52px; height: 52px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 22%, var(--surface-3)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } .ask-peek-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .ask-peek-av i { font-style: normal; font-weight: 800; font-size: 20px; color: var(--accent); } .ask-peek-live { color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .ask-peek-title { margin-top: 10px; font-size: 13px; color: var(--text-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ask-peek-follow { margin-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; } .ask-peek-follow b { color: var(--text); font-size: 15px; } .ask-up { color: #3ddc84; font-weight: 600; } .ask-down { color: #ff6b6b; font-weight: 600; } .ask-peek-month { color: var(--text-3); font-size: 12px; } .ask-peek-stats { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .ask-peek-stats div { padding: 8px 6px; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); text-align: center; display: grid; gap: 2px; } .ask-peek-stats b { font-size: 14px; } .ask-peek-stats small { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; } .ask-peek-actions { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ask-peek-actions .ask-send { padding: 8px 14px; font-size: 13px; } .ask-peek-actions .btn-table { text-decoration: none; } /* ---- Ask: what it can do, at a glance; personal chips; readable "read" footers ---- */ .ask-can { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 14px auto 0; max-width: 720px; } .ask-can span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--surface-3)); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-2); font-size: 12px; animation: askIn .5s cubic-bezier(.2,.7,.2,1) both; } .ask-can span:nth-child(2) { animation-delay: .05s; } .ask-can span:nth-child(3) { animation-delay: .1s; } .ask-can span:nth-child(4) { animation-delay: .15s; } .ask-can span:nth-child(5) { animation-delay: .2s; } .ask-can span:nth-child(6) { animation-delay: .25s; } .ask-can i { font-style: normal; font-size: 10px; color: var(--accent); } .ask-wrap.has-thread .ask-can { display: none; } .ask-try-label small { margin-left: 8px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-3); } .ask-chip.is-mine { border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-3)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); } .ask-chip-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); vertical-align: 1px; } .ask-views { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; text-transform: none; letter-spacing: 0; font-size: 11px; } .ask-views-label { color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; margin-right: 2px; } .ask-read { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--surface-3); color: var(--text-2); } .ask-read b { font-weight: 600; } .ask-read em { font-style: normal; color: var(--text-3); } .ask-read.is-more { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--surface-3)); } .ask-read.is-quick { color: var(--text-3); } .ask-can { max-width: 760px; } .ask-can span { padding: 4px 9px; font-size: 11.5px; } .ask-can { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; gap: 6px 8px; max-width: none; } .ask-can span { justify-content: center; } @media (max-width: 720px) { .ask-can { grid-template-columns: repeat(2, max-content); } } /* ---- multi-line drafts ---- */ .ask-form { align-items: flex-end; } .ask-form textarea { resize: none; line-height: 1.45; min-height: 44px; max-height: 190px; overflow-y: auto; font-family: inherit; display: block; } .ask-form .ask-send { height: 44px; } .ask-input-wrap input, .ask-input-wrap textarea { width: 100%; } .ask-input-mirror { display: block; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; } .ask-input-mirror > span { display: block; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .ask-msg.me .ask-bubble { white-space: pre-wrap; } /* ---- API Lab (experimental mobile-API observation tab) ---- */ .lab-wrap { max-width: 1000px; } .lab-beta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 2px 8px; border-radius: 999px; vertical-align: 3px; margin-left: 8px; } .lab-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 20px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--surface-3); } .lab-strip-l, .lab-strip-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .lab-toggle { padding: 8px 16px; } .lab-tok { font-size: 12px; padding: 3px 9px; border-radius: 999px; } .lab-tok.ok { color: #3ddc84; background: color-mix(in srgb, #3ddc84 12%, transparent); } .lab-tok.bad { color: #ff6b6b; background: color-mix(in srgb, #ff6b6b 12%, transparent); } .lab-strip-status { font-size: 13px; color: var(--text-2); white-space: nowrap; } .lab-strip-status b { color: var(--text); } .lab-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .lab-dot.on { background: #3ddc84; box-shadow: 0 0 0 3px color-mix(in srgb, #3ddc84 25%, transparent); } .lab-dot.connecting { background: #f5a623; animation: askDot 1.2s infinite ease-in-out; } .lab-dot.off { background: var(--surface-3); } .lab-counts { display: flex; gap: 10px; margin: 16px 0; } .lab-count { flex: 1; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--surface-3); display: grid; gap: 2px; } .lab-count b { font-size: 22px; letter-spacing: -.01em; } .lab-count small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); } .lab-feed { border: 1px solid var(--surface-3); border-radius: 14px; overflow: hidden; } .lab-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 14px; } .lab-feed-rows { max-height: 60vh; overflow-y: auto; } .lab-row { display: grid; grid-template-columns: 56px 90px 130px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--surface-2); font-size: 13.5px; animation: askIn .25s ease both; } .lab-row:last-child { border-bottom: 0; } .lab-row.sale { background: color-mix(in srgb, #3ddc84 8%, transparent); } .lab-row.err { background: color-mix(in srgb, #ff6b6b 8%, transparent); } .lab-row-time { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; } .lab-row-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; text-align: center; } .lab-row-kind.bid { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .lab-row-kind.sale { color: #1a7f4b; background: color-mix(in srgb, #3ddc84 22%, transparent); } .lab-row-kind.muted, .lab-row-kind.err { color: var(--text-3); background: var(--surface-2); } .lab-row-who { color: var(--text-2); font-weight: 600; } .lab-row-user { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lab-row-price { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .lab-row-price small { color: var(--text-3); font-weight: 500; } @media (max-width: 640px) { .lab-row { grid-template-columns: 48px 70px 1fr auto; } .lab-row-who { display: none; } } .lab-tok.warn { color: #f5a623; background: color-mix(in srgb, #f5a623 12%, transparent); } /* ---- API Lab: sub-views ---- */ .lab-sellers { display: inline-flex; gap: 6px; flex-wrap: wrap; } .lab-seller { font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface-3); padding: 2px 9px; border-radius: 999px; } .lab-tracked { font-size: 12px; color: var(--text-3); white-space: nowrap; } .lab-gvstat { font-size: 12px; color: var(--text-3); white-space: nowrap; } .lab-gvstat b { color: var(--accent); } .lab-chat { margin-top: 18px; border: 1px solid var(--surface-3); border-radius: 14px; background: var(--surface-2); overflow: hidden; } .lab-chat:empty { display: none; } .lab-chat-h { padding: 10px 14px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--surface-3); display: flex; align-items: center; gap: 8px; } .lab-chat-h small { font-weight: 500; color: var(--text-3); } .lab-chat-list { max-height: 340px; overflow-y: auto; padding: 8px 0; } .lab-chat-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 5px 14px; font-size: 13.5px; align-items: baseline; } .lab-chat-user { font-weight: 700; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lab-chat-text { color: var(--text); overflow-wrap: anywhere; } .lab-chat-row.mine { background: color-mix(in srgb, var(--accent) 9%, transparent); } .lab-chat-row.mine .lab-chat-user { color: var(--accent); } .lab-chat-row.err { background: color-mix(in srgb, #ff6b6b 9%, transparent); } .lab-chat-row.err .lab-chat-user { color: #ff6b6b; } .lab-chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--surface-3); } .lab-chat-input { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--surface-3); background: transparent; color: var(--text); } .lab-chat-input:focus { outline: none; border-color: var(--accent); } .lab-chat-send { padding: 8px 16px; } @media (max-width: 640px) { .lab-chat-row { grid-template-columns: 96px 1fr; } } .lab-channels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .lab-chip { appearance: none; border: 1px solid var(--surface-3); background: var(--surface-2); color: var(--text-2); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; } .lab-chip.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .lab-feed-split { display: grid; grid-template-columns: 1fr 260px; gap: 14px; } @media (max-width: 820px) { .lab-feed-split { grid-template-columns: 1fr; } } .lab-roster { border: 1px solid var(--surface-3); border-radius: 14px; overflow: hidden; align-self: start; } .lab-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--surface-3); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); } .lab-roster-head b { color: var(--text); font-size: 15px; } .lab-roster-head select { background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: 8px; color: var(--text); font: inherit; font-size: 12px; padding: 3px 6px; } .lab-roster-list { max-height: 56vh; overflow-y: auto; } .lab-roster-row { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; border-bottom: 1px solid var(--surface-2); } .lab-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 5px; } .lab-badge.mod { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); } .lab-badge.top { color: #1a7f4b; background: color-mix(in srgb, #3ddc84 20%, transparent); } .lab-badge.loy { color: var(--text-3); background: var(--surface-2); } .lab-empty.small { padding: 16px; font-size: 12.5px; } .lab-row-kind.give { color: #b06f00; background: color-mix(in srgb, #f5a623 20%, transparent); } .lab-row-kind.listing { color: var(--text-2); background: var(--surface-2); } .lab-row-kind.view, .lab-row-kind.chat { color: var(--text-3); background: var(--surface-2); } /* board */ .lab-showpicker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .lab-showchip { appearance: none; border: 1px solid var(--surface-3); background: var(--surface-2); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; display: grid; gap: 1px; text-align: left; } .lab-showchip small { color: var(--text-3); font-weight: 500; } .lab-showchip.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .lab-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .lab-board { grid-template-columns: 1fr; } } .lab-board-col { border: 1px solid var(--surface-3); border-radius: 14px; padding: 14px; } .lab-board-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 10px; display: flex; justify-content: space-between; } .lab-view-n { text-transform: none; letter-spacing: 0; } .lab-lot-price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; } .lab-lot-price.sold { color: #3ddc84; } .lab-lot-title { color: var(--text-2); font-size: 13px; margin: 2px 0 8px; } .lab-lot-meta { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; } .lab-pill { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; } .lab-ladder, .lab-recent { display: grid; gap: 3px; } .lab-ladder-row, .lab-recent-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--surface-2); } .lab-tiles { display: flex; gap: 8px; margin-bottom: 12px; } .lab-tile { flex: 1; background: var(--surface-2); border-radius: 10px; padding: 8px; text-align: center; display: grid; gap: 1px; } .lab-tile b { font-size: 17px; } .lab-tile small { font-size: 10px; text-transform: uppercase; color: var(--text-3); } .lab-give-active { background: color-mix(in srgb, #f5a623 12%, transparent); border-radius: 10px; padding: 10px; margin-bottom: 8px; } .lab-give-active b { font-size: 22px; } .lab-give-active small { display: block; color: var(--text-2); } .lab-give-done { font-size: 13px; padding: 4px 0; } .lab-give-done small { color: var(--text-3); } /* gql */ .lab-gql-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .lab-gql-bar select { background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: 8px; color: var(--text); font: inherit; padding: 8px 10px; } .lab-gql-label { color: var(--text-3); font-size: 12.5px; } .lab-gql-vars { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .lab-var { display: grid; gap: 3px; font-size: 12px; color: var(--text-3); } .lab-var input { background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: 8px; color: var(--text); font: inherit; padding: 7px 10px; min-width: 200px; } .lab-gql-out { background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: 12px; padding: 14px; font-size: 12px; line-height: 1.5; max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* intel */ .lab-intel-note { color: var(--text-3); font-size: 12.5px; margin-bottom: 12px; } .lab-intel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 820px) { .lab-intel-grid { grid-template-columns: 1fr; } } .lab-intel-card { border: 1px solid var(--surface-3); border-radius: 14px; padding: 14px; } .lab-intel-tbl { width: 100%; font-size: 13px; border-collapse: collapse; } .lab-intel-tbl td { padding: 5px 4px; border-bottom: 1px solid var(--surface-2); } .lab-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .lab-autojoin { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; } .lab-autojoin input { accent-color: var(--accent); } .lab-autojoin b { color: var(--accent); } .lab-join-btn { margin-top: 8px; width: 100%; appearance: none; border: 0; border-radius: 10px; padding: 8px; font: inherit; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, #f5a623, #e0851a); cursor: pointer; } .lab-join-btn:hover { filter: brightness(1.05); } .lab-join-btn.done, .lab-join-btn:disabled { background: var(--surface-3); color: var(--text-2); cursor: default; filter: none; } .lab-wins { margin-bottom: 14px; border: 1px solid color-mix(in srgb, #f5a623 40%, var(--surface-3)); border-radius: 14px; overflow: hidden; background: color-mix(in srgb, #f5a623 6%, transparent); } .lab-wins-head { padding: 10px 14px; font-weight: 700; font-size: 13.5px; border-bottom: 1px solid color-mix(in srgb, #f5a623 25%, transparent); } .lab-wins-head b { color: #b06f00; margin-left: 4px; } .lab-wins-list { max-height: 200px; overflow-y: auto; } .lab-win-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, #f5a623 12%, transparent); } .lab-win-item { font-weight: 600; } .lab-win-seller { color: var(--text-2); } .lab-win-order { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; } .lab-win-time { color: var(--text-3); font-size: 12px; } /* ---- API Lab: Giveaways tab ---- */ .lab-gv-config { border: 1px solid var(--surface-3); border-radius: 14px; padding: 16px; position: relative; } /* The gear: Discord win-alert settings. A gold dot means alerts are on. */ .lab-gear { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .lab-gear:hover { color: var(--text); border-color: var(--surface-3); } .lab-gear svg { width: 16px; height: 16px; } .lab-gear.on::after { content: ''; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #f5a623; border: 2px solid var(--surface); } .lab-wh-title { margin: 0 32px 4px 0; font-size: 17px; } .lab-wh-sub { margin: 0 0 12px; font-size: 13px; line-height: 1.45; } .lab-wh-status { font-size: 13px; padding: 10px 12px; border: 1px solid var(--surface-3); border-radius: 10px; background: var(--surface-2); margin-bottom: 14px; overflow-wrap: anywhere; min-width: 0; } .lab-wh-status code { font-size: 12px; } .lab-wh-latest { margin-top: 6px; font-size: 12.5px; color: var(--text-2); } .lab-wh-form { display: flex; flex-direction: column; gap: 12px; } .lab-wh-form .lab-var input { width: 100%; box-sizing: border-box; } .lab-wh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lab-wh-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .lab-wh-remove { margin-left: auto; color: var(--text-3); } .lab-wh-note { font-size: 12px; flex-basis: 100%; } .lab-wh-previewh { margin-top: 18px; } /* Discord-dark rendering of the card (always dark: that's what the channel looks like). */ .dc-msg { display: grid; grid-template-columns: 40px 1fr; gap: 12px; background: #313338; color: #dbdee1; border-radius: 12px; padding: 14px; font: 14px/1.375 "gg sans", "Noto Sans", -apple-system, "Segoe UI", sans-serif; } .dc-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #f5a623, #e0851a); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; } .dc-body { min-width: 0; } .dc-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; } .dc-name { font-weight: 600; color: #f2f3f5; } .dc-app { font-size: 10px; font-weight: 700; background: #5865f2; color: #fff; border-radius: 4px; padding: 1px 4px; line-height: 14px; } .dc-time { font-size: 12px; color: #949ba4; } .dc-content { margin-bottom: 4px; color: #dbdee1; } .dc-embed { background: #2b2d31; border-left: 4px solid #f5a623; border-radius: 4px; padding: 10px 14px 12px 12px; max-width: 520px; display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; } .dc-author { font-size: 12px; font-weight: 700; color: #f2f3f5; letter-spacing: .01em; } .dc-title { font-size: 15px; font-weight: 700; color: #f2f3f5; } .dc-desc { font-size: 14px; } .dc-desc a, .dc-fval a { color: #00a8fc; text-decoration: none; } .dc-desc a:hover, .dc-fval a:hover { text-decoration: underline; } .dc-quote { border-left: 4px solid #4e5058; padding-left: 10px; margin: 2px 0; } .dc-embed code { background: #1e1f22; border-radius: 3px; padding: 1px 4px; font-size: 12.5px; color: #dbdee1; } .dc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; } .dc-field { min-width: 0; } .dc-fname { font-size: 13px; font-weight: 700; color: #f2f3f5; margin-bottom: 2px; } .dc-fval { font-size: 13px; } .dc-footer { font-size: 12px; color: #949ba4; margin-top: 2px; } /* Item photo on the right — Discord's thumbnail slot (80px, top-right of the card, text wraps beside it). */ .dc-embed.has-thumb { position: relative; padding-right: 106px; } .dc-thumb { position: absolute; top: 10px; right: 12px; width: 80px; height: 80px; object-fit: cover; border-radius: 4px; background: #1e1f22; } @media (max-width: 560px) { .lab-wh-row { grid-template-columns: 1fr; } .dc-fields { grid-template-columns: 1fr 1fr; } } .lab-autojoin.big { font-size: 15px; color: var(--text); margin-bottom: 12px; } .lab-gv-fields { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } .lab-gv-fields .lab-var input { min-width: 120px; } .lab-gv-stats { display: flex; gap: 18px; margin-top: 14px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; } .lab-gv-stats span { min-width: 92px; } /* each counter owns a fixed slot, so a digit gained never nudges its neighbours */ .lab-gv-stats b { color: var(--text); font-size: 17px; } .lab-gv-warn { font-size: 12px; margin-top: 8px; } .lab-gv-listh { margin-top: 18px; } .lab-gv-listh b { font-variant-numeric: tabular-nums; font-weight: inherit; color: inherit; } /* Steady layout: the entries / status / action columns are FIXED tracks reserved at their widest state, so a countdown tick, a status flip or a button label swap can never move the title column or ripple across rows. The list area keeps a floor height so 0 ↔ 1 giveaways doesn't collapse the frame. */ .lab-gv-listwrap { min-height: 98px; } .lab-gv-list { border: 1px solid var(--surface-3); border-radius: 14px; overflow: hidden; } .lab-gv-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 104px 132px 104px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--surface-2); font-size: 13.5px; } .lab-gv-row:last-child { border-bottom: 0; } .lab-gv-seller { font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lab-gv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lab-gv-name { display: block; overflow: hidden; text-overflow: ellipsis; } .lab-gv-time { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .lab-gv-entries { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .lab-gv-entries small { color: var(--text-3); } .lab-gv-pill, .lab-gv-act { min-width: 0; } .lab-gv-empty { display: flex; align-items: center; justify-content: center; min-height: 98px; } .lab-gv-empty[hidden] { display: none; } /* an author display rule beats the UA [hidden] rule */ .lab-gstat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .lab-gv-pill .lab-gstat { display: block; width: 100%; box-sizing: border-box; text-align: center; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .lab-gstat.open { color: var(--text-3); background: var(--surface-2); } .lab-gstat.queued { color: #b06f00; background: color-mix(in srgb, #f5a623 18%, transparent); } .lab-gstat.entered { color: #1a7f4b; background: color-mix(in srgb, #3ddc84 20%, transparent); } .lab-gstat.skipped { color: var(--text-3); background: var(--surface-2); } .lab-bg-config { margin-top: 12px; } .lab-bg-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; font-size: 13.5px; } .lab-bg-head .rp-muted { font-size: 12px; } .lab-bg-sum { font-size: 12.5px; } .lab-bg-config .lab-bg-head { padding-right: 44px; } .lab-bg-switches { display: grid; gap: 8px; margin-top: 12px; } .lab-bg-opt { align-items: flex-start; } .lab-bg-opt input { margin-top: 3px; } .lab-bg-opt small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--text-3); } .lab-bg-status { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; line-height: 1.5; color: var(--text-2); display: grid; gap: 3px; } .lab-bg-status:empty { display: none; } .lab-bg-status .ok { color: var(--accent-text, var(--accent)); } .lab-bg-status .bad { color: var(--warn); } .lab-bg-save { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; } .lab-bg-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .lab-bg-details input, .lab-bg-details select { width: 100%; min-width: 0; box-sizing: border-box; } .lab-bg-details select { background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: 8px; color: var(--text); font: inherit; padding: 7px 10px; } .lab-gv-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; } .lab-gv-add input { flex: 0 1 220px; min-width: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--surface-3); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; } .lab-gv-addhint { font-size: 12px; } .lab-gstat.form { color: #4a55c8; background: color-mix(in srgb, #5865f2 16%, transparent); } .lab-join-btn.form { background: var(--surface-3); color: var(--text); } .lab-give-note { display: block; margin-top: 6px; color: var(--text-3); font-size: 11.5px; line-height: 1.35; } .lab-give-note.err { color: #c0392b; } #labFormBody p { font-size: 13.5px; line-height: 1.45; } .lab-form-sub { margin-top: -4px; } .lab-form-steps { padding-left: 20px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.45; } .lab-form-id { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; font-size: 12.5px; } .lab-form-id span { color: var(--text-3); } .lab-form-id code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 8px; border-radius: 6px; background: var(--surface-2); } .lab-form-bm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; } .lab-bm { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px dashed var(--text-3); color: var(--text); font-weight: 700; font-size: 12.5px; text-decoration: none; cursor: grab; background: var(--surface-2); } .lab-form-manual { margin-top: 8px; font-size: 12.5px; } .lab-form-manual summary { cursor: pointer; color: var(--text-3); } .lab-form-warn { margin-top: 6px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; color: #b06f00; background: color-mix(in srgb, #f5a623 14%, transparent); } .lab-form-exp { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-3); } .lab-form-exp.low { color: #c0392b; font-weight: 700; } .lab-form-err { color: #c0392b; font-size: 13px; } .lab-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; } .lab-form-actions .lab-join-btn { width: auto; margin-top: 0; padding: 8px 16px; } .lab-join-btn.small { width: auto; margin-top: 0; padding: 6px 14px; font-size: 12px; } .lab-gv-act .lab-join-btn.small { width: 100%; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .lab-gv-row { grid-template-columns: minmax(0, 1fr) 120px 98px; } .lab-gv-seller, .lab-gv-entries { display: none; } .lab-gv-pill .lab-gstat { padding: 3px 5px; letter-spacing: 0; } .lab-gv-act .lab-join-btn.small { padding: 6px 5px; } /* room for "JOINING IN 600S" / "Connecting…" in the system font; the ellipsis is the fallback for wider theme fonts */ } /* ---------- Competitor GMV board (Competitors → Competitor GMV) ---------- */ .cg-stat-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 4px 2px 16px; } .cg-stat { display: flex; flex-direction: column; } .cg-stat b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; } .cg-stat small { color: var(--text-3); font-size: 12px; margin-top: 2px; } .cg-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } .cg-discover { border: 1px solid var(--surface-3); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 16px; background: var(--surface-2); } .cg-disc-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .cg-input { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; } .cg-select { padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; } .cg-results { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .cg-hint { padding: 10px 2px; font-size: 13px; } .cg-result { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--surface-3); border-radius: var(--radius); background: var(--surface); } .cg-result-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .cg-result-nums { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; } .cg-result-nums b { color: var(--text); } .cg-list { display: flex; flex-direction: column; gap: 8px; } .cg-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--surface-3); border-radius: var(--radius-lg); background: var(--surface); } .cg-rank { font-size: 15px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: center; } .cg-main { min-width: 0; } .cg-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; } .cg-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cg-region { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); border: 1px solid var(--surface-3); border-radius: 5px; padding: 1px 5px; flex: none; } .cg-rating { font-size: 12px; color: var(--warn, #d9a400); flex: none; white-space: nowrap; } .cg-metrics { display: flex; gap: 22px; flex-wrap: wrap; } .cg-metric { display: flex; flex-direction: column; min-width: 0; } .cg-metric b { font-size: 16px; font-variant-numeric: tabular-nums; line-height: 1.15; } .cg-metric small { color: var(--text-3); font-size: 11.5px; margin-top: 1px; white-space: nowrap; } .cg-metric.cg-gmv b { font-size: 20px; color: var(--accent); } .cg-metric.cg-pending b { color: var(--text-3); font-weight: 500; } .cg-chg { font-weight: 700; } .cg-chg.up { color: var(--good); } .cg-chg.down { color: var(--bad); } .cg-flat { color: var(--text-3); } .cg-side { display: flex; align-items: center; gap: 10px; } .cg-spark { width: 72px; height: 22px; display: block; } .cg-spark-empty { border-bottom: 1px dashed var(--surface-3); align-self: center; } .cg-x { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; } .cg-x:hover { color: var(--bad); border-color: var(--bad); } .cg-x svg { width: 13px; height: 13px; } .cg-connect { max-width: 460px; } .cg-connect .btn-primary { margin-top: 10px; } @media (max-width: 640px) { .cg-actions { margin-left: 0; width: 100%; } .cg-actions .btn-table { flex: 1; } .cg-card { grid-template-columns: 26px minmax(0, 1fr) auto; } .cg-metrics { gap: 14px; } .cg-result { grid-template-columns: minmax(0, 1fr) auto; } .cg-result-nums { grid-column: 1 / -1; } } /* tone modifiers for the GMV board and the API Lab webhook panel — scoped to their leaves on purpose: a bare .tone-ok would also recolour the Settings .tts-status cards, whose titles inherit their text colour */ .cg-hint.tone-err, .empty-state.tone-err, .lab-wh-status .tone-err { color: var(--bad); } .lab-wh-status .tone-ok { color: var(--good); } @media (max-width: 640px) { .cg-result > .cg-track-btn { grid-row: 1; grid-column: 2; } } /* ---------- Whatnot inbox (Messages → Whatnot) ---------- */ .msg-switch { margin-bottom: 14px; } @media (min-width: 900px) { #view-messages { position: relative; } } .wni-layout { grid-template-columns: 320px minmax(0, 1fr); } @media (max-width: 860px) { .wni-layout { grid-template-columns: minmax(0, 1fr); } } .wni-setup { max-width: 620px; margin: 24px auto; padding: 32px; text-align: left; } .wni-setup-ico { width: 44px; height: 44px; border-radius: var(--radius-md, 10px); background: var(--accent-soft); color: var(--accent-text, var(--accent)); display: grid; place-items: center; margin-bottom: 14px; } .wni-setup-ico svg { width: 22px; height: 22px; } .wni-setup h3 { margin: 0 0 8px; font-size: 18px; } .wni-setup p { margin: 0 0 14px; color: var(--text-2); line-height: 1.55; } .wni-setup ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; } .wni-setup li { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md, 10px); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-body, 14px); line-height: 1.5; } .wni-setup li b { color: var(--text); } .wni-setup .msg-notice { margin-bottom: 14px; } .wni-setup-foot { margin: 0; font-size: var(--fs-meta); } .wni-draft-tag { font-style: normal; font-weight: 700; color: var(--accent-text, var(--accent)); } .wni-context { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-meta); } .wni-context svg { width: 14px; height: 14px; flex-shrink: 0; } .wni-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-bubble.wni-ref { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); opacity: .85; } .msg-bubble.wni-ref svg { width: 13px; height: 13px; } #wniCompose .msg-compose-foot { flex-wrap: wrap; } #wniCompose .msg-compose-hint { flex: 1 1 220px; } #wniCompose [data-wni-ai] { display: inline-flex; align-items: center; gap: 6px; } #wniCompose [data-wni-ai] svg { width: 14px; height: 14px; } a.msg-iconbtn { text-decoration: none; } .wni-tpl-modal h3 { margin: 0 0 6px; } .wni-tpl-blurb { margin: 0 0 16px; color: var(--text-2); font-size: var(--fs-meta); } .wni-tpl-list { display: grid; gap: 10px; margin-bottom: 16px; } .wni-tpl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md, 10px); background: var(--surface-2); } .wni-tpl-row input, .wni-tpl-row textarea { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); padding: 8px 10px; font: inherit; resize: vertical; } .wni-tpl-row textarea { grid-column: 1 / -1; } .wni-tpl-row .msg-iconbtn { grid-row: 1; grid-column: 2; } .wni-tpl-foot { display: flex; align-items: center; gap: 8px; } .wni-tpl-foot span { flex: 1; } .msg-layout[hidden], .msg-strip[hidden], .msg-actions[hidden], #msgNotice[hidden], #wniNotice[hidden], .wl-switch-badge[hidden] { display: none; } .wni-tpl-foot .btn-secondary, .wni-tpl-foot .btn-primary { width: auto; flex: 0 0 auto; } .wni-request-tag { font-style: normal; font-weight: 700; color: #e0a526; } .msg-tag.is-request { background: rgba(255, 210, 62, 0.14); color: #e0a526; } .wni-request-bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--border); background: rgba(255, 210, 62, 0.06); } .wni-request-bar div { flex: 1; min-width: 0; display: grid; gap: 2px; } .wni-request-bar span { color: var(--text-2); font-size: var(--fs-meta); line-height: 1.45; } .wni-request-bar .btn-primary { width: auto; flex: 0 0 auto; text-decoration: none; } @media (max-width: 600px) { .wni-request-bar { flex-direction: column; align-items: stretch; text-align: left; } } .wni-layout .msg-list-head #wniFilter { flex: 0 0 176px; width: 176px; max-width: none; } #wniCompose .msg-send { white-space: nowrap; width: auto; flex: 0 0 auto; } /* ---------- Whatnot orders (Orders → Whatnot orders, and the panel in the Whatnot inbox) ---------- */ .wno-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .wno-bar .nt-search { flex: 1 1 260px; min-width: 0; max-width: 420px; margin-left: auto; border-radius: 999px; } .wno-tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; } .wno-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; } .wno-tabs button b { font-weight: 700; color: var(--text-3); } .wno-tabs button.active { background: var(--surface); color: var(--text); border-color: var(--text-3); box-shadow: var(--shadow); } .wno-tabs button.active b { color: var(--accent-text, var(--accent)); } .wno-card { padding: 0; overflow: hidden; } .wno-table-wrap { overflow-x: auto; } .wno-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body, 14px); min-width: 860px; } .wno-table th { text-align: left; font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .wno-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; } .wno-table .num { text-align: right; font-variant-numeric: tabular-nums; } .wno-row { cursor: pointer; } .wno-row:hover, .wno-row.is-open { background: var(--surface-2); } .wno-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .wno-item { display: flex; align-items: center; gap: 10px; white-space: normal !important; min-width: 260px; max-width: 420px; } .wno-item img, .wno-thumb { width: 38px; height: 38px; border-radius: var(--radius-sm, 6px); object-fit: cover; flex-shrink: 0; background: var(--surface-2); } .wno-thumb { display: grid; place-items: center; color: var(--text-3); } .wno-thumb svg { width: 16px; height: 16px; } .wno-item span { display: grid; min-width: 0; } .wno-item b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .wno-item em { font-style: normal; color: var(--text-3); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wno-buyer { background: none; border: 0; padding: 0; color: var(--accent-text, var(--accent)); font: inherit; font-weight: 600; cursor: pointer; } .wno-buyer:hover { text-decoration: underline; } .wno-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 700; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; } .wno-chip.is-toship { background: rgba(255, 210, 62, 0.14); color: #e0a526; border-color: transparent; } .wno-chip.is-label { background: rgba(96, 165, 250, 0.14); color: #6aa9f7; border-color: transparent; } .wno-chip.is-shipped { background: rgba(167, 139, 250, 0.16); color: #a78bfa; border-color: transparent; } .wno-chip.is-delivered { background: rgba(52, 211, 153, 0.14); color: #34d399; border-color: transparent; } .wno-chip.is-refund, .wno-chip.is-cancelled { background: rgba(248, 113, 113, 0.14); color: #f87171; border-color: transparent; } .wno-track { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; } .wno-track:hover span { text-decoration: underline; } .wno-track svg { width: 14px; height: 14px; color: var(--text-3); } .wno-dim { color: var(--text-3); font-size: var(--fs-meta); } .wno-go a { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm, 6px); color: var(--text-3); } .wno-go a:hover { background: var(--surface); color: var(--text); } .wno-go svg { width: 14px; height: 14px; } .wno-detail td { background: var(--surface-2); white-space: normal; padding: 16px 18px 18px; } .wno-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1100px) { .wno-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .wno-detail-grid { grid-template-columns: minmax(0, 1fr); } } .wno-detail h4 { margin: 0 0 8px; font-size: var(--fs-meta); color: var(--text-3); font-weight: 600; text-transform: none; } .wno-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--fs-meta); color: var(--text-2); } .wno-line em { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; } .wno-line i { font-style: normal; color: var(--text-3); } .wno-line.is-strong { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--text); } .wno-copy { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: copy; border-bottom: 1px dashed var(--text-3); } .wno-note { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); padding: 8px 10px; font: inherit; font-size: var(--fs-meta); resize: vertical; } .wno-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .wno-detail-actions .btn-secondary, .wno-detail .btn-secondary { width: auto; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; } .wno-detail-actions svg { width: 14px; height: 14px; } .wno-foot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--text-3); font-size: var(--fs-meta); } .wno-foot:empty { display: none; } .wni-orders { display: grid; gap: 6px; padding: 8px 16px 12px; max-height: 260px; overflow-y: auto; } .wni-order { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-md, 10px); background: var(--surface-2); } .wni-order img, .wni-order-thumb { width: 32px; height: 32px; border-radius: var(--radius-sm, 6px); object-fit: cover; flex-shrink: 0; background: var(--surface); display: grid; place-items: center; color: var(--text-3); } .wni-order-thumb svg { width: 14px; height: 14px; } .wni-order-main { flex: 1; min-width: 0; display: grid; } .wni-order-main b { font-size: var(--fs-meta); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wni-order-main b i { font-style: normal; color: var(--text-3); } .wni-order-main em { font-style: normal; font-size: var(--fs-meta); color: var(--text-3); } .wni-order-track { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); text-decoration: none; font-size: var(--fs-meta); font-weight: 600; padding: 4px 6px; border-radius: var(--radius-sm, 6px); } .wni-order-track:hover { background: var(--surface); color: var(--text); } .wni-order-track svg { width: 14px; height: 14px; } .wni-orders-off, .wni-orders-more { padding: 8px 16px 12px; font-size: var(--fs-meta); color: var(--text-2); display: block; } .wni-orders-off a, .wni-orders-more { color: var(--accent-text, var(--accent)); } #view-wnorders .pay-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #view-wnorders .pay-header .msg-actions { margin-left: auto; } #wniThread .msg-orders-inline { display: block; } .wni-order { background: var(--surface); } .wno-line em { white-space: nowrap; } .wno-line span { min-width: 0; } /* ---------- Whatnot → Analytics ---------- */ .wna-ranges { margin: 0 0 16px; } .wna-h { margin: 22px 0 10px; font-size: 15px; font-weight: 700; } .wna-card { padding: 0; overflow: hidden; } .wna-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); overflow: hidden; } .wna-card .wna-kpis { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; } .wna-kpi { display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px 16px; background: var(--surface); border: 0; color: var(--text); font: inherit; cursor: pointer; min-height: 78px; } .wna-kpi:disabled { cursor: default; color: var(--text); } .wna-card .wna-kpi:not(.active):not(:disabled) { background: var(--surface-2); } .wna-card .wna-kpi:not(:disabled):hover { background: var(--surface); } .wna-kpi.active { box-shadow: inset 0 -2px 0 var(--accent); } .wna-kpi span { font-size: var(--fs-meta); color: var(--text-3); font-weight: 600; } .wna-kpi b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .wna-kpi em { font-style: normal; font-size: var(--fs-meta); color: var(--text-3); } @media (max-width: 760px) { .wna-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wna-chart-wrap { padding: 16px 16px 12px; } .wna-chart { width: 100%; height: 240px; display: block; overflow: visible; } .wna-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; } .wna-axis { stroke: var(--text-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .5; } .wna-bar.is-a { fill: var(--data, var(--accent)); } .wna-bar.is-b { fill: #f5b942; } .wna-bar:hover { opacity: .8; } .wna-val, .wna-tick { font-size: 11px; fill: var(--text-3); font-variant-numeric: tabular-nums; } .wna-val { fill: var(--text-2); font-weight: 600; } .wna-legend { display: flex; gap: 16px; padding-top: 10px; font-size: var(--fs-meta); color: var(--text-2); } .wna-legend span { display: inline-flex; align-items: center; gap: 6px; } .wna-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .wna-legend i.is-a { background: var(--data, var(--accent)); } .wna-legend i.is-b { background: #f5b942; } .wna-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } @media (max-width: 900px) { .wna-two { grid-template-columns: minmax(0, 1fr); } } .wna-top { padding: 16px 18px; } .wna-top-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .wna-top-head h3 { margin: 0; font-size: 15px; } .wna-top-head .btn-secondary { width: auto; display: inline-flex; align-items: center; gap: 6px; } .wna-top-head svg { width: 14px; height: 14px; } .wna-top-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body, 14px); } .wna-top-row:last-child { border-bottom: 0; } .wna-top-row > i { width: 18px; font-style: normal; color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } .wna-ava { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text-2); flex-shrink: 0; } .wna-top-row .wno-buyer { color: var(--text); text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wna-top-row b { font-variant-numeric: tabular-nums; color: var(--accent-text, var(--accent)); } .wna-show { white-space: normal !important; min-width: 220px; max-width: 420px; font-weight: 600; } .wna-foot { margin: 14px 2px 0; color: var(--text-3); font-size: var(--fs-meta); } #view-wnanalytics .pay-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Whatnot → Analytics: Overview / Shows tabs and the Shows tab */ .wna-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin: 0 0 16px; } .wna-tabs button { background: none; border: 0; padding: 0 0 10px; margin-bottom: -1px; font: inherit; font-weight: 600; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; } .wna-tabs button:hover { color: var(--text); } .wna-tabs button.active { color: var(--text); border-bottom-color: var(--accent); } .wna-ranges[hidden] { display: none; } .wna-showpick { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; } .wna-showpick-nav { display: inline-flex; gap: 6px; } .wna-showpick-nav .msg-iconbtn { width: 34px; height: 34px; justify-content: center; font-size: 18px; padding: 0; } .wna-showpick-nav .msg-iconbtn:disabled { opacity: .35; cursor: default; } .wna-showpick-main { flex: 1 1 320px; min-width: 0; display: grid; gap: 2px; } .wna-showpick-main h3 { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; } .wna-showpick-main span { color: var(--text-3); font-size: var(--fs-meta); } .wna-showpick select { flex: 0 1 300px; min-width: 0; max-width: 100%; } .wna-mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } @media (max-width: 1100px) { .wna-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .wna-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wna-mcard { display: grid; gap: 4px; align-content: start; padding: 14px 16px; min-height: 92px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 10px); } .wna-mcard span { font-size: var(--fs-meta); color: var(--text-3); font-weight: 600; } .wna-mcard b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .wna-vs { font-style: normal; font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); } .wna-vs.is-up { color: #34d399; } .wna-vs.is-down { color: #f87171; } .wna-fulfil { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; } .wna-fulfil .btn-secondary { width: auto; margin-left: auto; } .wno-chip.is-none { opacity: .55; } .wna-top-row .wno-dim { margin-left: auto; } .wna-top-row .wno-dim + b { min-width: 64px; text-align: right; } .wna-shows th button { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: 600; cursor: pointer; } .wna-shows th button:hover, .wna-shows th button.active { color: var(--text); } .wna-shows td.is-best { color: #34d399; font-weight: 700; } .wna-avg td { color: var(--text-3); font-weight: 600; border-bottom: 0; background: var(--surface-2); }