:root { color-scheme: dark; --guide-bg: #0d1424; --guide-bg-2: #111b2d; --guide-surface: #151f33; --guide-surface-2: #1b2940; --guide-card: #101a2c; --guide-border: #2d3d57; --guide-border-strong: #3d5a7c; --guide-text: #edf4ff; --guide-muted: #9fb0c8; --guide-soft: #c7d5ea; --guide-brand: #28d4d8; --guide-brand-2: #7c5cff; --guide-accent: #f4b34d; --guide-good: #37d399; --guide-danger: #ff6b7a; --guide-shadow: 0 24px 80px rgba(0, 0, 0, 0.28); } /* html[data-theme="light"] makes the pre-paint script effective before user-guide-page.js stamps .guide-light on : the vars flip at first paint, so light-mode users never see a dark flash. Once setTheme() runs, the two selectors always agree (it sets both the attribute and the class). */ body.guide-light, html[data-theme="light"] body { color-scheme: light; --guide-bg: #eef5fb; --guide-bg-2: #e1edf8; --guide-surface: #ffffff; --guide-surface-2: #edf5fc; --guide-card: #f8fbff; --guide-border: #c7d7ea; --guide-border-strong: #8fb2d8; --guide-text: #142033; --guide-muted: #5d6d83; --guide-soft: #263a54; --guide-brand: #008f99; --guide-brand-2: #5c4ad6; --guide-accent: #9b6700; --guide-good: #087b55; --guide-danger: #b4233d; --guide-shadow: 0 18px 54px rgba(24, 46, 74, 0.14); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; overflow-x: hidden; overflow-y: auto !important; background: radial-gradient(circle at 16% 0%, rgba(40, 212, 216, 0.18), transparent 28rem), radial-gradient(circle at 90% 8%, rgba(124, 92, 255, 0.18), transparent 30rem), linear-gradient(135deg, var(--guide-bg), var(--guide-bg-2)); color: var(--guide-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; } body.guide-page { position: static !important; height: auto !important; max-height: none !important; transform: none !important; } a { color: var(--guide-brand); } button, input { font: inherit; } .guide-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, 2vw, 18px); padding: 8px clamp(14px, 3vw, 34px); background: color-mix(in srgb, var(--guide-bg) 88%, transparent); border-bottom: 1px solid rgba(143, 178, 216, 0.24); backdrop-filter: blur(16px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); } .guide-light .guide-topbar { background: color-mix(in srgb, var(--guide-bg) 88%, transparent); box-shadow: 0 10px 22px rgba(24, 46, 74, 0.08); } .guide-brand, .guide-top-actions { display: flex; align-items: center; gap: 10px; } .guide-brand { color: var(--guide-text); text-decoration: none; font-weight: 800; min-width: 0; } .guide-logo-wrap { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid rgba(40, 212, 216, 0.28); border-radius: 9px; background: color-mix(in srgb, var(--guide-brand) 10%, var(--guide-card)); box-shadow: none; } .guide-logo { width: 25px; height: 25px; object-fit: contain; } .guide-brand-text { display: block; min-width: 0; } .guide-brand-text strong { color: var(--guide-text); font-size: 14px; line-height: 1.1; white-space: nowrap; } .guide-top-actions { flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .guide-primary-button, .guide-secondary-button, .guide-icon-button { min-height: 34px; border-radius: 8px; border: 1px solid var(--guide-border); padding: 7px 11px; cursor: pointer; text-decoration: none; font-size: 12px; font-weight: 800; line-height: 1; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .guide-primary-button { background: linear-gradient(135deg, var(--guide-brand), #42a5ff); color: #06121d; border-color: transparent; box-shadow: none; } .guide-secondary-button, .guide-icon-button { background: var(--guide-surface); color: var(--guide-text); } .guide-primary-button:hover, .guide-secondary-button:hover, .guide-icon-button:hover { transform: translateY(-1px); border-color: var(--guide-brand); } .guide-shell { width: min(1400px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 56px; } .guide-hero { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.72fr); gap: 16px; align-items: start; margin-bottom: 18px; } .guide-hero-copy, .guide-role-panel, .guide-sidebar-card, .guide-content { background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)), var(--guide-surface); border: 1px solid var(--guide-border); box-shadow: var(--guide-shadow); } .guide-hero-copy { position: relative; min-width: 0; border-radius: 12px; padding: clamp(14px, 1.7vw, 20px); } .guide-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 8px; border: 1px solid rgba(40, 212, 216, 0.26); border-radius: 999px; background: rgba(40, 212, 216, 0.09); color: var(--guide-brand); font-size: 10px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .guide-hero h1 { max-width: 760px; margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: 0; } .guide-hero-text { max-width: 800px; margin: 8px 0 0; color: var(--guide-soft); font-size: 14px; line-height: 1.5; } .guide-search { max-width: 820px; margin-top: 12px; padding: 7px; border: 1px solid rgba(143, 178, 216, 0.18); border-radius: 10px; background: color-mix(in srgb, var(--guide-card) 72%, transparent); } .guide-light .guide-search { background: color-mix(in srgb, var(--guide-card) 84%, transparent); } .guide-search label, .guide-sidebar-title { display: block; margin-bottom: 5px; color: var(--guide-muted); font-size: 11px; font-weight: 900; text-transform: uppercase; } .guide-search label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .guide-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .guide-search-field { position: relative; min-width: 0; } .guide-search-icon { position: absolute; left: 14px; top: 50%; width: 15px; height: 15px; border: 2px solid var(--guide-muted); border-radius: 50%; transform: translateY(-58%); opacity: 0.82; pointer-events: none; } .guide-search-icon::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 7px; height: 2px; border-radius: 999px; background: var(--guide-muted); transform: rotate(45deg); } .guide-search input { width: 100%; min-height: 38px; border: 1px solid var(--guide-border); border-radius: 8px; background: var(--guide-card); color: var(--guide-text); padding: 0 15px 0 44px; outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } .guide-search input:focus { border-color: var(--guide-brand); box-shadow: 0 0 0 3px rgba(40, 212, 216, 0.18); } #guide-search-count, .guide-search-count-preview { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; min-height: 28px; border: 1px solid var(--guide-border); border-radius: 999px; background: var(--guide-card); color: var(--guide-muted); font-size: 10px; font-weight: 900; text-align: center; } .guide-role-panel { display: grid; grid-template-columns: 1fr; align-content: start; gap: 9px; min-width: 0; border-radius: 12px; padding: 14px; } .guide-role-panel .guide-sidebar-title { margin-bottom: 0; color: var(--guide-text); font-size: 12px; letter-spacing: 0.02em; } .guide-role-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; } .guide-role-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; min-height: 58px; padding: 8px; text-align: left; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--guide-card); color: var(--guide-text); border: 1px solid var(--guide-border); border-radius: 10px; cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .guide-role-tab:hover { border-color: var(--guide-brand); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); } .guide-role-tab.active { border-color: var(--guide-brand); background: color-mix(in srgb, var(--guide-brand) 12%, var(--guide-card)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--guide-brand) 18%, transparent); } .guide-role-tab:disabled { cursor: not-allowed; opacity: 0.58; } .guide-role-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(40, 212, 216, 0.26); border-radius: 8px; background: color-mix(in srgb, var(--guide-brand) 10%, var(--guide-card)); color: var(--guide-brand); font-size: 11px; font-weight: 900; line-height: 1; } .guide-role-tab.active .guide-role-icon { background: linear-gradient(135deg, var(--guide-brand), #42a5ff); color: #06121d; border-color: transparent; } .guide-role-copy { display: grid; gap: 3px; min-width: 0; } .guide-role-copy > span { color: var(--guide-brand); font-size: 10px; font-weight: 900; text-transform: uppercase; } .guide-role-copy strong { font-size: 10.5px; color: var(--guide-soft); line-height: 1.25; } .guide-role-note { margin: 4px 0 0; color: var(--guide-muted); font-size: 10px; line-height: 1.25; } .guide-quick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .guide-quick-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--guide-border); border-radius: 8px; padding: 8px 10px; background: var(--guide-card); color: var(--guide-soft); cursor: pointer; text-align: left; font-size: 11px; font-weight: 800; line-height: 1.25; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .guide-quick-link::after { content: ">"; flex: 0 0 auto; color: var(--guide-muted); font-size: 12px; font-weight: 900; } .guide-quick-link:hover { border-color: var(--guide-brand); color: var(--guide-text); background: rgba(40, 212, 216, 0.09); transform: translateX(2px); } .guide-quick-link.active { border-color: var(--guide-brand); background: rgba(40, 212, 216, 0.13); color: var(--guide-text); box-shadow: inset 3px 0 0 var(--guide-brand); } .guide-loading-inline { color: var(--guide-muted); font-size: 12px; margin: 0; } .guide-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; } .guide-sidebar { position: sticky; top: 72px; } .guide-sidebar-card { max-height: calc(100vh - 92px); overflow: auto; border-radius: 12px; padding: 16px; } #guide-toc { display: grid; gap: 4px; } .guide-toc-link { display: block; padding: 8px 9px; border-radius: 8px; color: var(--guide-soft); text-decoration: none; font-size: 13px; font-weight: 700; } .guide-toc-link[data-depth="3"] { padding-left: 20px; color: var(--guide-muted); font-size: 12px; } .guide-toc-link:hover, .guide-toc-link.active { background: rgba(40, 212, 216, 0.13); color: var(--guide-text); } .guide-content { border-radius: 12px; padding: clamp(20px, 4vw, 42px); overflow: hidden; } .guide-content h1, .guide-content h2, .guide-content h3 { scroll-margin-top: 92px; letter-spacing: 0; } .guide-content h1 { display: none; } .guide-content h2 { margin: 42px 0 12px; padding-top: 22px; border-top: 1px solid var(--guide-border); font-size: 26px; line-height: 1.16; } .guide-content h2:first-child, .guide-content h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; } .guide-content h3 { margin: 26px 0 8px; color: var(--guide-brand); font-size: 18px; } .guide-content p, .guide-content li { color: var(--guide-soft); } .guide-content code { padding: 2px 5px; border-radius: 6px; background: var(--guide-card); color: var(--guide-accent); font-size: 0.92em; } .guide-content pre { overflow: auto; padding: 14px; border: 1px solid var(--guide-border); border-radius: 10px; background: var(--guide-card); } .guide-content pre code { padding: 0; background: transparent; } .guide-content table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; overflow: hidden; border: 1px solid var(--guide-border); border-radius: 10px; } .guide-content th, .guide-content td { padding: 10px 12px; border-bottom: 1px solid var(--guide-border); text-align: left; vertical-align: top; } .guide-content th { background: var(--guide-card); color: var(--guide-text); font-size: 12px; text-transform: uppercase; } .guide-content tr:last-child td { border-bottom: 0; } .guide-content blockquote { margin: 16px 0; padding: 12px 14px; border-left: 4px solid var(--guide-brand); background: rgba(40, 212, 216, 0.11); border-radius: 8px; } .guide-content ul, .guide-content ol { padding-left: 22px; } .guide-content li { margin: 6px 0; } .guide-content mark { border-radius: 4px; background: rgba(244, 179, 77, 0.35); color: var(--guide-text); padding: 0 2px; } .guide-loading { display: flex; align-items: center; gap: 10px; color: var(--guide-muted); } .guide-spinner { width: 16px; height: 16px; border: 2px solid var(--guide-border); border-top-color: var(--guide-brand); border-radius: 50%; animation: guide-spin 0.8s linear infinite; } @keyframes guide-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .guide-primary-button:hover, .guide-secondary-button:hover, .guide-icon-button:hover { transform: none; } .guide-spinner { animation: none; } } .guide-visual { margin: 16px 0 26px; padding: 14px; border: 1px solid var(--guide-border); border-radius: 10px; background: var(--guide-card); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12); } .guide-visual-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .guide-visual-heading > div { display: grid; gap: 2px; } .guide-visual-heading strong { color: var(--guide-text); font-size: 16px; line-height: 1.2; } .guide-visual-heading small, .guide-visual-kicker { color: var(--guide-muted); font-size: 10px; font-weight: 900; text-transform: uppercase; } .guide-visual-heading small { text-align: right; text-transform: none; } .guide-screenshot-frame { margin: 0; overflow: hidden; border: 1px solid var(--guide-border); border-radius: 10px; background: color-mix(in srgb, var(--guide-surface) 78%, var(--guide-card)); } .guide-screenshot-link { display: block; padding: 10px; color: inherit; text-decoration: none; } .guide-screenshot-image { display: block; width: 100%; min-height: 180px; max-height: min(72vh, 760px); object-fit: contain; border-radius: 8px; background: var(--guide-bg); } .guide-screenshot-frame figcaption { margin: 0; padding: 8px 12px; border-top: 1px solid var(--guide-border); color: var(--guide-muted); font-size: 11px; font-weight: 800; } .guide-screenshot-fallback { display: none; } .guide-screenshot-frame.is-missing { border: 0; background: transparent; } .guide-screenshot-frame.is-missing .guide-screenshot-link, .guide-screenshot-frame.is-missing figcaption { display: none; } .guide-screenshot-frame.is-missing .guide-screenshot-fallback { display: block; } .guide-screenshot-deployments-and-meetings { max-width: min(760px, 100%); margin-inline: auto; } .guide-screenshot-deployments-and-meetings .guide-screenshot-image { max-height: min(46vh, 430px); } .guide-tabs, .guide-stat-strip, .guide-diagnostics-grid, .guide-config-grid, .guide-ticket-badges, .guide-attachment-row, .guide-admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .guide-tabs span, .guide-admin-tabs span, .guide-pill, .guide-attachment-row span { border: 1px solid var(--guide-border); border-radius: 999px; padding: 5px 9px; background: rgba(255, 255, 255, 0.04); color: var(--guide-soft); font-size: 11px; font-style: normal; font-weight: 900; } .guide-tabs .active, .guide-admin-tabs .active { border-color: var(--guide-brand); color: var(--guide-text); background: rgba(40, 212, 216, 0.17); } .guide-stat-strip { margin: 12px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .guide-stat-strip div, .guide-diagnostics-grid div, .guide-config-grid div, .guide-leader-mock div, .guide-performance-mock div { display: grid; gap: 2px; min-width: 0; padding: 11px; border: 1px solid var(--guide-border); border-radius: 8px; background: var(--guide-surface); } .guide-stat-strip span, .guide-diagnostics-grid span, .guide-config-grid small, .guide-leader-mock span, .guide-performance-mock span, .guide-thread-meta, .guide-ticket-ref { color: var(--guide-muted); font-size: 11px; font-weight: 800; } .guide-stat-strip strong, .guide-diagnostics-grid strong, .guide-config-grid b, .guide-leader-mock strong, .guide-performance-mock b { color: var(--guide-text); } .guide-stat-strip small, .guide-leader-mock small { color: var(--guide-muted); font-size: 11px; } .guide-ticket-stack, .guide-thread-mock, .guide-notification-mock, .guide-team-mock, .guide-admin-mock { display: grid; gap: 10px; } .guide-mini-ticket, .guide-ticket-card-mock, .guide-thread-message, .guide-notification-mock div, .guide-team-mock div, .guide-admin-row, .guide-phone-ticket, .guide-phone-reader { border: 1px solid var(--guide-border); border-radius: 10px; background: var(--guide-surface); } .guide-mini-ticket { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; } .guide-mini-ticket.is-email, .guide-ticket-card-mock { border-color: rgba(40, 212, 216, 0.64); } .guide-mini-ticket div, .guide-ticket-main div { display: grid; gap: 3px; min-width: 0; } .guide-mini-ticket b, .guide-ticket-ref { color: var(--guide-brand); font-size: 12px; } .guide-mini-ticket strong, .guide-ticket-main strong { color: var(--guide-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guide-mini-ticket small, .guide-ticket-main small { color: var(--guide-muted); } .guide-mini-ticket em { color: var(--guide-good); font-size: 11px; font-style: normal; font-weight: 900; } .guide-avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--guide-brand), #33a8ff); color: #06121d; font-size: 12px; font-weight: 900; } .guide-avatar.user { background: linear-gradient(135deg, #ff6b7a, #f4b34d); } .guide-ticket-card-mock { display: grid; gap: 14px; padding: 14px; } .guide-ticket-realistic { position: relative; overflow: hidden; border-color: rgba(52, 211, 153, 0.56); background: linear-gradient(90deg, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0.04) 38%, rgba(31, 41, 55, 0.58) 100%), rgba(31, 41, 55, 0.62); box-shadow: 0 12px 28px rgba(16, 185, 129, 0.1); } .guide-ticket-realistic::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #34d399, #22d3ee); } .guide-light .guide-ticket-realistic { border-color: rgba(8, 145, 178, 0.44); background: linear-gradient(90deg, rgba(6, 182, 212, 0.13) 0%, rgba(6, 182, 212, 0.04) 42%, rgba(255, 255, 255, 0.96) 100%), #ffffff; box-shadow: 0 12px 26px rgba(8, 145, 178, 0.12); } .guide-ticket-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; } .guide-pill.info { border-color: rgba(40, 212, 216, 0.55); color: var(--guide-brand); } .guide-pill.success { border-color: rgba(55, 211, 153, 0.55); color: var(--guide-good); } .guide-pill.warning { border-color: rgba(244, 179, 77, 0.6); color: var(--guide-accent); } .guide-pill.progress { border-color: rgba(244, 179, 77, 0.38); color: #fbbf24; } .guide-ticket-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--guide-border); padding-top: 12px; color: var(--guide-muted); font-size: 12px; font-weight: 800; } .guide-ticket-actions span, .guide-ticket-actions strong { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; border: 1px solid transparent; border-radius: 7px; padding: 4px 8px; } .guide-ticket-actions span { border-color: rgba(148, 163, 184, 0.18); color: var(--guide-muted); background: rgba(15, 23, 42, 0.18); } .guide-light .guide-ticket-actions span { border-color: #d1d9e2; background: #f8fafc; } .guide-ticket-actions strong { color: var(--guide-soft); } .guide-ticket-actions button, .guide-phone-ticket button { border: 0; border-radius: 8px; background: linear-gradient(135deg, var(--guide-good), var(--guide-brand)); color: #06121d; cursor: default; font-weight: 900; padding: 7px 10px; } .guide-ticket-action-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .guide-ticket-action-map div { display: grid; gap: 3px; min-width: 0; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; background: rgba(15, 23, 42, 0.22); padding: 9px; } .guide-light .guide-ticket-action-map div, .guide-light .guide-badge-strip span { border-color: #d1d9e2; background: #f8fafc; } .guide-ticket-action-map b { color: var(--guide-text); font-size: 12px; } .guide-ticket-action-map span { color: var(--guide-muted); font-size: 11px; line-height: 1.35; } .guide-status-line { display: grid; gap: 3px; padding: 12px; border: 1px solid rgba(55, 211, 153, 0.45); border-radius: 8px; background: rgba(55, 211, 153, 0.12); color: var(--guide-good); } .guide-status-line span { color: var(--guide-soft); font-size: 12px; } .guide-diagnostics-grid, .guide-config-grid, .guide-leader-mock, .guide-performance-mock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .guide-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-thread-message { display: grid; gap: 10px; padding: 12px; } .guide-thread-message.inbound { border-left: 3px solid var(--guide-brand); } .guide-thread-message.outbound { border-left: 3px solid var(--guide-good); } .guide-thread-top, .guide-admin-row, .guide-team-mock div, .guide-notification-mock div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .guide-thread-top strong, .guide-notification-mock b, .guide-team-mock b, .guide-admin-row b { color: var(--guide-text); } .guide-thread-top small, .guide-notification-mock span, .guide-team-mock small, .guide-admin-row span { color: var(--guide-muted); font-size: 12px; } .guide-email-body-sample { padding: 12px; border: 1px solid rgba(40, 212, 216, 0.22); border-radius: 8px; background: rgba(40, 212, 216, 0.08); } .guide-email-body-sample p { margin: 0 0 8px; } .guide-signature-line { display: block; width: 100%; height: 1px; margin: 10px 0; background: var(--guide-border); } .guide-kb-real { display: grid; gap: 12px; } .guide-kb-filter-card, .guide-kb-toolbar, .guide-kb-search, .guide-kb-card { min-width: 0; } .guide-kb-icon { display: inline-block; width: 14px; height: 14px; border: 2px solid #60a5fa; border-radius: 3px; transform: rotate(45deg); } .guide-kb-checks input { accent-color: #2563eb; } .guide-kb-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .guide-kb-section { display: grid; gap: 8px; } .guide-kb-section-title { margin: 0; } .guide-kb-card h4 { margin: 0; } .guide-light .guide-kb-real .bg-gray-800, .guide-light .guide-kb-real .bg-gray-800\/40 { background-color: #ffffff !important; } .guide-light .guide-kb-real .border-gray-700, .guide-light .guide-kb-real .border-gray-700\/50 { border-color: #cbd5e1 !important; } .guide-light .guide-kb-real .text-white, .guide-light .guide-kb-real .text-gray-300 { color: #0f172a !important; } .guide-light .guide-kb-real .text-gray-400 { color: #475569 !important; } .guide-attachment-row { justify-content: flex-end; } .guide-attachment-row small { color: var(--guide-muted); margin-left: 5px; } .guide-notification-mock div, .guide-team-mock div, .guide-admin-row { padding: 11px 12px; } .guide-notification-mock em, .guide-admin-row em { color: var(--guide-brand); font-size: 11px; font-style: normal; font-weight: 900; } .guide-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--guide-muted); } .guide-dot.online { background: var(--guide-good); box-shadow: 0 0 0 4px rgba(55, 211, 153, 0.13); } .guide-team-mock div { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; } .guide-leader-mock { grid-template-columns: repeat(3, minmax(0, 1fr)); } .guide-score-mock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .guide-score-row, .guide-leaderboard-mock div { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--guide-border); border-radius: 8px; background: var(--guide-surface); padding: 10px 11px; } .guide-score-row span, .guide-leaderboard-mock b { min-width: 0; color: var(--guide-soft); font-size: 12px; } .guide-score-row strong, .guide-leaderboard-mock strong { flex-shrink: 0; font-size: 14px; } .guide-score-row.positive strong { color: var(--guide-good); } .guide-score-row.negative strong { color: var(--guide-danger); } .guide-badge-strip, .guide-leaderboard-mock { grid-column: 1 / -1; } .guide-badge-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .guide-badge-strip span { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; background: rgba(15, 23, 42, 0.2); color: var(--guide-soft); font-size: 11px; font-weight: 900; padding: 8px; text-align: center; } .guide-leaderboard-mock { display: grid; gap: 7px; } .guide-phone-frame, #guide-mobile-preview { width: min(320px, 100%); margin: 0 auto; padding: 12px; border: 8px solid #050a16; border-radius: 28px; background: #0b1324; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } #guide-mobile-preview { position: relative; width: min(360px, 100%); height: 650px; overflow: hidden; padding: 0; } #guide-mobile-preview .guide-mobile-app-container { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: linear-gradient(to bottom right, #111827, #1f2937, #111827); } #guide-mobile-preview header { position: relative !important; top: auto !important; z-index: 2; flex-shrink: 0; padding: 7px 10px !important; border-bottom: 1px solid rgba(99, 102, 241, 0.16); background: rgba(17, 24, 39, 0.96); } #guide-mobile-preview #team-name-header { color: #22d3ee; font-size: 13px !important; font-weight: 900; } .guide-mobile-icon-btn { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #e5e7eb; font-size: 11px; font-weight: 900; } #guide-mobile-preview #tickets-filter-bar { padding: 8px !important; border-bottom: 1px solid rgba(99, 102, 241, 0.15); background: rgba(17, 24, 39, 0.98); } #guide-mobile-preview #tickets-filter-bar input { width: 100%; min-height: 34px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 10px; background: rgba(15, 23, 42, 0.85); color: #e5e7eb; padding: 0 12px; font-size: 12px; } #guide-mobile-preview main { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 10px; } #guide-mobile-preview .ticket-card { margin: 0 0 10px !important; padding: 12px !important; } #guide-mobile-preview .email-message-modal { position: relative !important; display: block !important; width: 100% !important; height: 285px !important; max-height: none !important; overflow: auto !important; border: 1px solid rgba(99, 102, 241, 0.28); border-radius: 12px !important; background: #0f172a !important; } #guide-mobile-preview .email-message-modal-body { margin: 0 !important; padding: 10px !important; overflow: visible !important; } #guide-mobile-preview .email-message-modal-header { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.18); padding-bottom: 8px; } #guide-mobile-preview .email-message-modal-header strong { color: #22d3ee; font-size: 10px; } #guide-mobile-preview .email-message-modal-header h3 { margin: 2px 0; color: #f8fafc; font-size: 13px; } #guide-mobile-preview .email-message-modal-header p { margin: 0; color: #94a3b8; font-size: 10px; } #guide-mobile-preview .email-message-modal-close { align-self: start; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 8px; background: rgba(15, 23, 42, 0.8); color: #e5e7eb; padding: 6px 8px; font-size: 10px; } #guide-mobile-preview .email-message-body { margin: 10px 0 !important; padding: 10px !important; border: 1px solid rgba(34, 211, 238, 0.18); border-radius: 10px; background: rgba(8, 47, 73, 0.36); color: #e5e7eb; font-size: 12px; } #guide-mobile-preview .email-reply-composer { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 10px; padding: 8px; background: rgba(15, 23, 42, 0.62); } #guide-mobile-preview .email-reply-label { color: #cbd5e1; font-size: 10px; font-weight: 900; } #guide-mobile-preview .email-reply-textarea { width: 100%; min-height: 66px !important; margin-top: 6px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 8px; background: #0b1220; color: #94a3b8; padding: 8px; font-size: 11px; } #guide-mobile-preview #mobile-bottom-nav { position: absolute !important; left: 10px !important; right: 10px !important; bottom: 10px !important; z-index: 3 !important; width: auto !important; } #guide-mobile-preview #mobile-fab { position: absolute !important; right: 20px !important; bottom: 74px !important; z-index: 4 !important; width: 46px !important; height: 46px !important; font-size: 24px; } .guide-light #guide-mobile-preview { border-color: #dbeafe; background: #eaf3fb; } .guide-light #guide-mobile-preview .guide-mobile-app-container { background: #eaf3fb; } .guide-light #guide-mobile-preview header, .guide-light #guide-mobile-preview #tickets-filter-bar { background: #f8fafc; } .guide-light #guide-mobile-preview .email-message-modal { background: #f8fafc !important; } .guide-light #guide-mobile-preview .email-message-modal-header h3, .guide-light #guide-mobile-preview .email-message-body { color: #0f172a; } .guide-light #guide-mobile-preview .email-message-body { background: #e0f2fe; } .guide-phone-top { margin-bottom: 10px; color: var(--guide-brand); font-size: 13px; font-weight: 900; text-align: center; } .guide-phone-ticket, .guide-phone-reader { display: grid; gap: 7px; padding: 11px; margin-bottom: 10px; } .guide-phone-ticket strong, .guide-phone-reader span { color: var(--guide-text); } .guide-phone-ticket small, .guide-phone-reader p { color: var(--guide-muted); } .guide-performance-mock div { position: relative; } .guide-performance-mock span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--guide-border); color: var(--guide-text); } .guide-performance-mock .done span { background: var(--guide-good); color: #06121d; } .guide-real-preview { border: 1px solid rgba(99, 102, 241, 0.22); border-radius: 12px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.84), rgba(17, 24, 39, 0.72)); padding: 14px; pointer-events: none; } .guide-real-preview button, .guide-real-preview input, .guide-real-preview label, .guide-real-preview details, .guide-real-preview summary { cursor: default; } .guide-real-preview h3, .guide-real-preview p { margin-top: 0; } .guide-real-shell { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); gap: 12px; min-width: 0; } .guide-real-sidebar, .guide-real-main, .guide-real-preview .ticket-card, .guide-real-preview .email-thread-panel, .guide-real-preview .admin-section, .guide-real-preview .modern-card { min-width: 0; } .guide-real-preview .ticket-card { max-width: none; margin: 0; cursor: default; } .guide-real-preview .email-thread-list { max-height: none; } .guide-real-preview .email-reply-textarea { min-height: 74px; } .guide-real-stat-row, .guide-real-leader-row, .guide-real-notification, .guide-admin-table-row { display: grid; align-items: center; gap: 8px; border-top: 1px solid rgba(148, 163, 184, 0.12); padding: 9px 0; } .guide-real-stat-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto; } .guide-real-stat-row > span { width: 9px; height: 9px; border-radius: 999px; } .guide-real-stat-row b, .guide-real-leader-row b, .guide-real-notification b, .guide-admin-table-row span, .guide-admin-table-row b { min-width: 0; color: #f8fafc; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guide-real-stat-row small, .guide-real-notification span { min-width: 0; color: #94a3b8; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guide-real-stat-row strong, .guide-real-leader-row strong { color: #f8fafc; font-weight: 900; } .guide-real-notification { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; } .guide-real-notification em, .guide-admin-table-row em { border: 1px solid rgba(34, 211, 238, 0.26); border-radius: 999px; color: #67e8f9; font-size: 10px; font-style: normal; font-weight: 800; padding: 2px 7px; } .guide-leader-grid, .guide-performance-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .guide-performance-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } .guide-performance-flow .modern-card { display: grid; gap: 4px; } .guide-performance-flow span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: rgba(34, 211, 238, 0.16); color: #67e8f9; font-weight: 900; } .guide-performance-flow b { color: #f8fafc; font-size: 13px; } .guide-performance-flow small { color: #94a3b8; font-size: 11px; } .guide-real-leader-row, .guide-admin-table-row { grid-template-columns: auto minmax(0, 1fr) auto; } .guide-real-leader-row span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(99, 102, 241, 0.2); color: #c7d2fe; font-size: 11px; font-weight: 900; } .guide-admin-table-row { padding: 9px 12px; } .guide-admin-table-row.header { background: rgba(15, 23, 42, 0.42); border-top: 0; text-transform: uppercase; } .guide-admin-app-preview { padding: 0; overflow: hidden; } .guide-admin-shell { border-radius: 12px; overflow: hidden; } .guide-admin-body { display: grid; grid-template-columns: 178px minmax(0, 1fr); min-height: 560px; } .guide-admin-sidebar { min-width: 0; } .guide-admin-sidebar .nav-link { color: #cbd5e1; font-size: 12px; font-weight: 700; } .guide-admin-main { min-width: 0; padding: 18px; } .guide-admin-app-preview .admin-users-toolbar { grid-template-columns: minmax(130px, 1.2fr) repeat(3, minmax(104px, 1fr)) auto; } .guide-admin-app-preview .admin-users-table { min-width: 760px; } .guide-admin-app-preview .admin-users-actions { grid-template-columns: repeat(3, auto); } .guide-admin-section-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; } .guide-admin-mini-row { align-items: center; border-top: 1px solid rgba(148, 163, 184, 0.14); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; padding: 9px 0; } .guide-admin-mini-row b, .guide-admin-mini-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guide-admin-mini-row b { color: #f8fafc; font-size: 12px; } .guide-admin-mini-row span { color: #94a3b8; font-size: 11px; } .guide-admin-mini-row em { border: 1px solid rgba(34, 211, 238, 0.26); border-radius: 999px; color: #67e8f9; font-size: 10px; font-style: normal; font-weight: 800; padding: 2px 7px; } .guide-admin-kpi { border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 8px; background: rgba(15, 23, 42, 0.44); padding: 10px; } .guide-admin-kpi span { color: #94a3b8; display: block; font-size: 11px; margin-bottom: 5px; } .guide-admin-kpi strong { color: #f8fafc; display: block; font-size: 18px; } .guide-leader-workspace-preview { display: grid; gap: 14px; } .guide-leader-row { align-items: center; display: grid; gap: 8px; grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1.4fr) auto; } .guide-leader-row > span { border-radius: 999px; height: 9px; width: 9px; } .guide-leader-row b, .guide-leader-row small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guide-leader-row b { color: #f8fafc; font-size: 12px; } .guide-leader-row small { color: #94a3b8; font-size: 11px; } .guide-leader-row em { border: 1px solid rgba(16, 185, 129, 0.28); border-radius: 999px; color: #6ee7b7; font-size: 10px; font-style: normal; font-weight: 800; padding: 2px 7px; } .guide-leader-row em.warning { border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; } .guide-phone-frame .ticket-card { padding: 12px !important; } .guide-light .guide-real-preview { border-color: #cbd5e1; background: #f8fafc; } .guide-light .guide-admin-app-preview { background: #e8f1fb; } .guide-light .guide-admin-shell, .guide-light .guide-admin-shell .bg-gray-900 { background: #eff6ff !important; color: #0f172a !important; } .guide-light .guide-admin-shell header, .guide-light .guide-admin-sidebar, .guide-light .guide-admin-shell .bg-gray-800, .guide-light .guide-admin-shell .admin-users-hero, .guide-light .guide-admin-shell .admin-users-panel, .guide-light .guide-admin-shell .admin-users-stat, .guide-light .guide-admin-kpi { background: #ffffff !important; border-color: #cbd5e1 !important; } .guide-light .guide-admin-shell .text-white, .guide-light .guide-admin-shell h2, .guide-light .guide-admin-shell h3, .guide-light .guide-admin-shell .admin-users-hero h2, .guide-light .guide-admin-shell .admin-users-panel-header h3, .guide-light .guide-admin-shell .admin-users-stat strong, .guide-light .guide-admin-shell .admin-users-person p, .guide-light .guide-admin-mini-row b, .guide-light .guide-admin-kpi strong { color: #0f172a !important; } .guide-light .guide-admin-shell .text-gray-400, .guide-light .guide-admin-shell .admin-users-hero p:last-child, .guide-light .guide-admin-shell .admin-users-panel-header p, .guide-light .guide-admin-shell .admin-users-count-line, .guide-light .guide-admin-shell .admin-users-stat span, .guide-light .guide-admin-shell .admin-users-person span, .guide-light .guide-admin-shell .admin-users-table td, .guide-light .guide-admin-mini-row span, .guide-light .guide-admin-kpi span { color: #475569 !important; } .guide-light .guide-admin-shell .admin-users-toolbar, .guide-light .guide-admin-shell .admin-users-table th { background: #f1f5f9 !important; } .guide-light .guide-admin-shell .admin-users-toolbar input, .guide-light .guide-admin-shell .admin-users-toolbar select { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } .guide-light .guide-real-preview:not(.guide-mobile-preview-wrap):not(.guide-admin-app-preview) { background: #f8fbff; border-color: #c7d7ea; } .guide-light .guide-real-preview .guide-real-sidebar, .guide-light .guide-real-preview .guide-real-main, .guide-light .guide-real-preview .modern-card, .guide-light .guide-real-preview .guide-mini-ticket, .guide-light .guide-real-preview .guide-thread-message, .guide-light .guide-real-preview .guide-notification-mock div, .guide-light .guide-real-preview .guide-team-mock div, .guide-light .guide-real-preview .guide-stat-strip div, .guide-light .guide-real-preview .guide-diagnostics-grid div, .guide-light .guide-real-preview .guide-config-grid div, .guide-light .guide-real-preview .guide-leader-mock div, .guide-light .guide-real-preview .guide-performance-mock div, .guide-light .guide-real-preview .guide-score-row, .guide-light .guide-real-preview .guide-leaderboard-mock div { background: #ffffff !important; border-color: #cbd5e1 !important; } .guide-light .guide-real-preview .guide-tabs span, .guide-light .guide-real-preview .guide-admin-tabs span, .guide-light .guide-real-preview .guide-pill, .guide-light .guide-real-preview .guide-attachment-row span { background: #f1f5f9; border-color: #cbd5e1; color: #334155; } .guide-light .guide-real-preview .guide-tabs .active, .guide-light .guide-real-preview .guide-admin-tabs .active { background: #e0f2fe; border-color: #67e8f9; color: #0f172a; } .guide-light .guide-real-preview .guide-email-body-sample { background: #e0f7fa; border-color: #8bdce5; color: #0f172a; } .guide-light .guide-real-preview .guide-status-line { background: #dcfce7; border-color: #86efac; color: #047857; } .guide-light .guide-screenshot-frame { background: #ffffff; border-color: #c7d7ea; } .guide-light .guide-screenshot-image { background: #eef5fb; } .guide-light .guide-screenshot-frame figcaption { background: #f8fbff; border-color: #d6e3f2; color: #475569; } .guide-light .guide-real-preview .text-white, .guide-light .guide-real-preview .email-thread-title, .guide-light .guide-real-preview .email-message-name, .guide-light .guide-real-preview .email-message-subject, .guide-light .guide-real-preview .guide-real-stat-row b, .guide-light .guide-real-preview .guide-real-leader-row b, .guide-light .guide-real-preview .guide-real-notification b, .guide-light .guide-real-preview .guide-admin-table-row span, .guide-light .guide-real-preview .guide-admin-table-row b, .guide-light .guide-real-preview .guide-performance-flow b { color: #0f172a !important; } .guide-light .guide-real-preview .text-gray-400, .guide-light .guide-real-preview .email-thread-subtitle, .guide-light .guide-real-preview .email-message-address, .guide-light .guide-real-preview .email-message-time, .guide-light .guide-real-preview .guide-real-stat-row small, .guide-light .guide-real-preview .guide-real-notification span, .guide-light .guide-real-preview .guide-performance-flow small { color: #475569 !important; } .guide-light .guide-real-preview .guide-real-stat-row strong, .guide-light .guide-real-preview .guide-real-leader-row strong, .guide-light .guide-real-preview .guide-stat-strip strong, .guide-light .guide-real-preview .guide-diagnostics-grid strong, .guide-light .guide-real-preview .guide-config-grid b, .guide-light .guide-real-preview .guide-score-row strong, .guide-light .guide-real-preview .guide-leaderboard-mock strong { color: #0f172a !important; } .guide-light .guide-real-preview .guide-stat-strip span, .guide-light .guide-real-preview .guide-diagnostics-grid span, .guide-light .guide-real-preview .guide-config-grid small, .guide-light .guide-real-preview .guide-ticket-ref, .guide-light .guide-real-preview .guide-thread-meta { color: #475569 !important; } .guide-light .guide-real-preview .bg-gray-800, .guide-light .guide-real-preview .bg-gray-800\/40, .guide-light .guide-real-preview .bg-gray-800\/60, .guide-light .guide-real-preview .bg-gray-900\/40 { background-color: #ffffff !important; } @media (max-width: 980px) { .guide-hero, .guide-layout { grid-template-columns: 1fr; } .guide-role-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-role-panel { order: 2; } .guide-quick-links { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .guide-sidebar { position: static; } .guide-sidebar-card { max-height: none; } #guide-toc { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .guide-real-shell { grid-template-columns: 1fr; } .guide-leader-grid, .guide-performance-flow, .guide-admin-body, .guide-admin-section-grid { grid-template-columns: 1fr; } .guide-admin-sidebar { display: none; } .guide-admin-main { padding: 12px; } .guide-admin-app-preview .admin-users-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .guide-topbar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 8px 10px; } .guide-brand { width: 100%; } .guide-logo-wrap { width: 32px; height: 32px; border-radius: 8px; } .guide-logo { width: 24px; height: 24px; } .guide-brand-text strong { font-size: 14px; } .guide-brand-text small { font-size: 10px; } .guide-top-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .guide-primary-button, .guide-secondary-button, .guide-icon-button { min-width: 44px; min-height: 44px; padding: 8px 7px; font-size: 11px; text-align: center; } .guide-shell { width: min(100% - 20px, 1400px); padding-top: 10px; } .guide-hero { gap: 10px; } .guide-hero-copy { border-radius: 12px; padding: 12px; } .guide-eyebrow { margin-bottom: 7px; font-size: 10px; } .guide-hero h1 { font-size: clamp(24px, 7vw, 30px); line-height: 1.08; } .guide-hero-text { margin-top: 7px; font-size: 13px; line-height: 1.45; } .guide-search-row { grid-template-columns: minmax(0, 1fr) auto; } .guide-search { margin-top: 10px; padding: 8px; border-radius: 10px; } .guide-search input { min-height: 44px; } .guide-role-tabs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 3px; -webkit-overflow-scrolling: touch; } .guide-role-tab { flex: 0 0 min(245px, 78vw); min-height: 0; padding: 8px; } .guide-role-icon { width: 26px; height: 26px; } #guide-search-count { min-width: 0; width: fit-content; padding-inline: 9px; } .guide-role-panel { padding: 12px; } .guide-quick-links { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .guide-quick-link { flex: 0 0 min(250px, 78vw); scroll-snap-align: start; } .guide-visual { padding: 10px; } .guide-screenshot-link { padding: 7px; } .guide-screenshot-image { min-height: 140px; max-height: 68vh; } .guide-visual-heading, .guide-thread-top, .guide-admin-row, .guide-notification-mock div { display: grid; justify-content: stretch; } .guide-visual-heading small { text-align: left; } .guide-stat-strip, .guide-diagnostics-grid, .guide-config-grid, .guide-leader-mock, .guide-performance-mock, .guide-ticket-action-map, .guide-score-mock, .guide-badge-strip { grid-template-columns: 1fr; } .guide-mini-ticket { grid-template-columns: auto minmax(0, 1fr); } .guide-mini-ticket em { grid-column: 2; } .guide-ticket-badges, .guide-ticket-actions, .guide-attachment-row { justify-content: flex-start; } .guide-team-mock div { grid-template-columns: auto minmax(0, 1fr) auto; } .guide-team-mock small { grid-column: 2 / -1; } .guide-real-preview { padding: 10px; } .guide-real-dashboard .grid-cols-4, .guide-real-dashboard .grid-cols-\[1fr_auto_auto\], .guide-settings-preview .grid-cols-4, .guide-settings-preview .grid-cols-2, .guide-scoreboard .grid-cols-5 { grid-template-columns: 1fr; } .guide-real-stat-row, .guide-real-notification, .guide-admin-table-row, .guide-leader-row, .guide-admin-mini-row { grid-template-columns: auto minmax(0, 1fr); } .guide-real-stat-row small, .guide-real-notification span, .guide-admin-table-row em, .guide-leader-row small, .guide-leader-row em, .guide-admin-mini-row span, .guide-admin-mini-row em { grid-column: 2 / -1; } .guide-admin-app-preview header > div, .guide-admin-app-preview .admin-users-hero, .guide-admin-app-preview .admin-users-panel-header { align-items: flex-start; flex-direction: column; } .guide-admin-app-preview .admin-users-stat-grid, .guide-admin-app-preview .grid.grid-cols-3, .guide-leader-workspace-preview .grid.grid-cols-2, .guide-leader-workspace-preview .grid.lg\:grid-cols-2, .guide-leader-workspace-preview .grid.lg\:grid-cols-4 { grid-template-columns: 1fr; } .guide-admin-app-preview .admin-users-toolbar { grid-template-columns: 1fr; } .guide-admin-app-preview .admin-users-table { min-width: 0; } .guide-admin-app-preview .admin-users-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; } .guide-leader-workspace-preview .leader-workspace-header { padding: 14px; } .guide-leader-workspace-preview .leader-workspace-header h2 { font-size: 1.15rem; line-height: 1.25; } .guide-real-preview .email-message-actions { max-width: 100%; } } @media print { body { background: #ffffff; color: #111827; } .guide-topbar, .guide-hero, .guide-sidebar { display: none; } .guide-shell { width: 100%; padding: 0; } .guide-layout { display: block; } .guide-content { box-shadow: none; border: 0; padding: 0; color: #111827; } .guide-content h1 { display: block; } .guide-content h2, .guide-content h3, .guide-content p, .guide-content li, .guide-content td, .guide-content th { color: #111827; } .guide-content a { color: #005f99; } .guide-visual { box-shadow: none; break-inside: avoid; } }