@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root, [data-theme='dark'], [data-theme='light'] { color-scheme: dark; --ops-bg: #070d1c; --ops-bg-2: #0b1326; --ops-panel: #10182b; --ops-panel-2: #151e33; --ops-panel-3: #1c263d; --ops-line: #334057; --ops-line-soft: rgba(176, 190, 226, 0.16); --ops-text: #eff4ff; --ops-muted: #aeb7ce; --ops-faint: #737d96; --ops-primary: #5a50f0; --ops-primary-2: #c6c1ff; --ops-cyan: #7ed7ff; --ops-cyan-2: #0ea5e9; --ops-coral: #ffb08a; --ops-green: #85efac; --ops-red: #ff8d8d; --ops-warn: #ffd082; --ops-radius-sm: 4px; --ops-radius: 6px; --ops-radius-lg: 8px; --ink: var(--ops-text); --ink-muted: var(--ops-muted); --paper: var(--ops-bg); --paper-strong: var(--ops-panel); --accent: var(--ops-coral); --accent-2: var(--ops-primary); --accent-3: var(--ops-cyan); --border: var(--ops-line-soft); --shadow: transparent; --glow: 0 0 0 1px rgba(126, 215, 255, 0.16); --input-bg: rgba(255, 255, 255, 0.035); --input-ink: var(--ops-text); --line: var(--ops-line-soft); --panel: var(--ops-panel); --panel-soft: rgba(255, 255, 255, 0.035); --text: var(--ops-text); --muted: var(--ops-muted); --error-bg: rgba(122, 36, 53, 0.44); --error-ink: #ffd6d6; } /* Stitch production handoff: Media-Ops master system */ :root, [data-theme='dark'], [data-theme='light'] { --ops-bg: #131315; --ops-bg-2: #0e0e10; --ops-panel: #1c1b1d; --ops-panel-2: #201f21; --ops-panel-3: #2a2a2c; --ops-line: #46464d; --ops-line-soft: rgba(145, 144, 152, 0.24); --ops-text: #e5e1e4; --ops-muted: #c7c5ce; --ops-faint: #919098; --ops-primary: #090d25; --ops-primary-2: #c2c4e5; --ops-cyan: #22d3ee; --ops-cyan-2: #3b82f6; --ops-coral: #ffb5a0; --ops-green: #14b8a6; --ops-red: #ef4444; --ops-warn: #f59e0b; --ops-radius-sm: 4px; --ops-radius: 8px; --ops-radius-lg: 12px; --ink: var(--ops-text); --ink-muted: var(--ops-muted); --paper: var(--ops-bg); --paper-strong: var(--ops-panel); --border: var(--ops-line-soft); --panel: var(--ops-panel); --panel-soft: rgba(255, 255, 255, 0.035); --input-bg: #0e0e10; --input-ink: var(--ops-text); } * { letter-spacing: 0 !important; } html { background: var(--ops-bg); } body { min-height: 100vh; background: radial-gradient(circle at 18% 0%, rgba(90, 80, 240, 0.2), transparent 32rem), radial-gradient(circle at 88% 12%, rgba(14, 165, 233, 0.13), transparent 28rem), linear-gradient(180deg, #081025 0%, #060b18 62%, #050914 100%); color: var(--ops-text); font-family: "Geist", "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.5; } a { color: inherit; } .page { width: min(100%, 1480px); max-width: none; margin: 0 auto; padding: 0 20px 92px; gap: 18px; } .header { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0; align-items: center; margin: 0 -20px; padding: 14px 20px 12px; border-bottom: 1px solid var(--ops-line); background: rgba(8, 14, 31, 0.88); backdrop-filter: blur(18px); } .header-left, .header-right { min-width: 0; } .brand-link { gap: 12px; min-width: 0; } .brand-stack { gap: 0; min-width: 0; } .brand { color: var(--ops-primary-2); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 800; text-transform: uppercase; text-shadow: 0 0 18px rgba(198, 193, 255, 0.18); } .tagline { color: var(--ops-muted); font-size: 0.78rem; font-family: "JetBrains Mono", Consolas, monospace; } .brand-logo--header { width: 34px; height: 34px; object-fit: contain; border-radius: var(--ops-radius); } .branding-logo-shell { position: relative; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; border: 1px solid rgba(126, 215, 255, 0.22); background: rgba(17, 26, 51, 0.92); } .branding-logo-shell img, .branding-logo-shell svg { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; } .branding-logo-shell img { opacity: 0; } .branding-logo-shell img.is-loaded { opacity: 1; } .header-right { display: inline-flex; align-items: center; gap: 10px; } .beta-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; border: 1px solid rgba(126, 215, 255, 0.36); border-radius: var(--ops-radius-lg); background: rgba(14, 165, 233, 0.16); color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; } .header-nav { grid-column: 1 / -1; margin-top: 12px; } .header-actions { display: flex; justify-content: center; gap: 8px; width: 100%; } .header-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; border-radius: var(--ops-radius); border: 1px solid transparent; background: transparent; color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.78rem; text-decoration: none; box-shadow: none; } .header-actions a:hover, .header-actions a.is-active { border-color: rgba(126, 215, 255, 0.22); background: rgba(14, 165, 233, 0.16); color: var(--ops-text); } .avatar-button { width: 38px; height: 38px; border-radius: var(--ops-radius); border: 1px solid var(--ops-line-soft); background: var(--ops-panel-3); color: var(--ops-text); box-shadow: none; } .signed-in-dropdown { border-radius: var(--ops-radius-lg); border: 1px solid var(--ops-line); background: rgba(13, 20, 39, 0.98); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42); } .signed-in-header, .signed-in-build { color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; } .signed-in-actions a, .signed-in-signout { border-radius: var(--ops-radius); border-color: var(--ops-line-soft); background: rgba(255, 255, 255, 0.035); } .site-banner { border-radius: var(--ops-radius); border: 1px solid rgba(255, 208, 130, 0.28); background: rgba(103, 75, 25, 0.38); color: #ffe4b3; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.82rem; } .card, .admin-card, .admin-panel, .main-panel, .summary-card, .portal-overview-card, .status-box, .timeline-card, .modal-card, .admin-zone, .admin-rail-card, .users-summary-card, .stat-card { border-radius: var(--ops-radius-lg) !important; border: 1px solid var(--ops-line) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)), var(--ops-panel) !important; box-shadow: none !important; } .card { width: 100%; padding: 24px; gap: 20px; } h1, h2, h3 { color: var(--ops-text); font-weight: 700; line-height: 1.1; } h1 { font-size: clamp(2rem, 5vw, 4rem); } h2 { font-size: clamp(1.25rem, 2vw, 1.75rem); } h3 { font-size: 1rem; } .lede, .section-subtitle, .meta, .helper, .recent-meta, .user-directory-subtext, .users-summary-meta { color: var(--ops-muted) !important; } .section-kicker, .admin-sidebar-title, .admin-nav-title, .stat-label, .users-summary-label, .user-bulk-label, .settings-inline-field span, .recent-filter span, .label-row, .portal-toolbar label span, .admin-rail-eyebrow { color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; } input, select, textarea { width: 100%; min-height: 44px; border-radius: var(--ops-radius) !important; border: 1px solid var(--ops-line) !important; background: rgba(8, 13, 28, 0.78) !important; color: var(--ops-text) !important; font-family: "Geist", "Segoe UI", Arial, sans-serif; font-size: 0.96rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); } input:focus, select:focus, textarea:focus { outline: 2px solid rgba(126, 215, 255, 0.24); border-color: rgba(126, 215, 255, 0.6) !important; } input::placeholder, textarea::placeholder { color: #616b84; } button, .ghost-button, .settings-action-button, .header-link { min-height: 40px; border-radius: var(--ops-radius) !important; border: 1px solid rgba(126, 215, 255, 0.18); background: var(--ops-primary); color: #f7f7ff; font-family: "Geist", "Segoe UI", Arial, sans-serif; font-size: 0.92rem; font-weight: 700; box-shadow: none !important; } button:hover, .ghost-button:hover { filter: brightness(1.08); } button:disabled, .ghost-button:disabled { cursor: not-allowed; opacity: 0.58; } .ghost-button, .details-toggle button, .admin-toolbar-actions button, .portal-workspace-switch button:not(.is-active), .settings-action-button.ghost-button { background: rgba(255, 255, 255, 0.035) !important; color: var(--ops-text) !important; } .error-banner, .status-banner, .action-message { border-radius: var(--ops-radius); border: 1px solid var(--ops-line-soft); background: rgba(255, 255, 255, 0.035); color: var(--ops-muted); } .error-banner { border-color: rgba(255, 141, 141, 0.35); background: rgba(122, 36, 53, 0.35); color: var(--ops-red); } .loading-center { min-height: 180px; place-items: center; } .spinner { border-color: rgba(126, 215, 255, 0.18); border-top-color: var(--ops-cyan); } .loading-text { color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; } .auth-screen { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(360px, 520px); gap: 32px; align-items: center; min-height: calc(100vh - 210px); padding: 36px 0; } .auth-hero { display: grid; gap: 28px; min-height: 520px; align-content: center; padding: 42px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: linear-gradient(90deg, rgba(8, 13, 28, 0.94), rgba(8, 13, 28, 0.72)), repeating-linear-gradient(90deg, rgba(126, 215, 255, 0.04) 0 1px, transparent 1px 56px), linear-gradient(140deg, rgba(90, 80, 240, 0.16), transparent 55%); } .auth-mark { width: 86px; height: 86px; display: grid; place-items: center; border: 1px solid rgba(198, 193, 255, 0.22); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.035); } .auth-mark .brand-logo--login { width: 64px; height: 64px; margin: 0; } .auth-title-block { display: grid; gap: 14px; max-width: 620px; } .auth-title-block h1 { text-transform: capitalize; } .auth-title-block p { color: var(--ops-muted); font-size: 1.15rem; max-width: 34rem; } .auth-panel { padding: 28px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: radial-gradient(circle at top right, rgba(126, 215, 255, 0.08), transparent 20rem), var(--ops-panel); } .auth-form label, .admin-form label, .compact-form label, .profile-section label, .filter, .users-page-toolbar-group, .user-directory-search label { display: grid; gap: 8px; color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.76rem; font-weight: 700; text-align: left; text-transform: uppercase; } .auth-footnote { display: inline-flex; align-items: center; gap: 8px; color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.78rem; } .live-dot, .system-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ops-cyan); box-shadow: 0 0 14px rgba(126, 215, 255, 0.64); } .system-dot-up, .system-up .system-dot { background: var(--ops-green); } .system-dot-down, .system-down .system-dot { background: var(--ops-red); } .system-dot-degraded, .system-degraded .system-dot { background: var(--ops-warn); } .system-dot-not_configured, .system-not_configured .system-dot, .system-disabled .system-dot, .system-unknown .system-dot { background: var(--ops-faint); box-shadow: none; } .ops-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ops-metric-card { display: grid; gap: 8px; min-height: 150px; padding: 18px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--ops-panel); } .ops-metric-card strong { color: var(--ops-primary-2); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; } .ops-metric-card p { margin: 0; color: var(--ops-muted); } .home-page { display: grid; gap: 18px; } .home-command { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(380px, 1.15fr); align-items: end; gap: clamp(24px, 5vw, 64px); padding: clamp(24px, 4vw, 42px); overflow: hidden; border: 1px solid rgba(126, 215, 255, 0.22); border-radius: var(--ops-radius-lg); background: radial-gradient(circle at 88% 20%, rgba(14, 165, 233, 0.18), transparent 42%), linear-gradient(145deg, rgba(35, 74, 145, 0.18), rgba(9, 17, 36, 0.68)); } .home-command-copy { display: grid; gap: 10px; } .home-command-copy h1 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.8rem); line-height: 0.98; letter-spacing: -0.045em; } .home-command-copy p { max-width: 52ch; margin: 0; color: var(--ops-muted); line-height: 1.6; } .home-search { display: grid; gap: 9px; } .home-search > label { color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .home-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .home-search-row input, .home-search-row button { min-height: 52px; } .home-search-row input { padding-inline: 17px; border-color: rgba(126, 215, 255, 0.25); background: rgba(3, 8, 20, 0.48); font-size: 1rem; } .home-search-results, .home-recent { padding: 20px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.024); } .home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; } .home-section-heading > div:first-child { display: grid; gap: 5px; } .home-section-heading h2 { margin: 0; } .home-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 16px; } .home-result-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 13px 15px; text-align: left; border: 1px solid var(--ops-line-soft); background: rgba(255, 255, 255, 0.032); } .home-result-card > span:first-child { display: grid; gap: 4px; min-width: 0; } .home-result-card small, .home-result-card > span:last-child { color: var(--ops-muted); font-size: 0.75rem; } .home-metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.02); } .home-metric-strip > div { display: grid; gap: 6px; min-width: 0; padding: 15px 18px; border-right: 1px solid var(--ops-line-soft); } .home-metric-strip > div:last-child { border-right: 0; } .home-metric-strip span { color: var(--ops-muted); font-size: 0.74rem; } .home-metric-strip strong { color: var(--ops-text); font-size: 1.15rem; } .home-recent .recent-header { margin-bottom: 16px; } .home-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-recent-grid .recent-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 92px; padding: 10px; } .recent-poster-placeholder { display: grid; place-items: center; width: 52px; height: 70px; color: var(--ops-faint); background: rgba(255, 255, 255, 0.035); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.68rem; } .recent-open-cue { padding-right: 6px; color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; } .home-empty-state { display: grid; gap: 6px; place-items: center; min-height: 170px; color: var(--ops-muted); text-align: center; border: 1px dashed var(--ops-line); border-radius: var(--ops-radius); } .home-empty-state strong { color: var(--ops-text); } .layout-grid { grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr); align-items: start; } .find-panel, .recent.centerpiece { border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.025); padding: 18px; } .system-status, .recent-header, .find-header, .section-header, .user-directory-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .system-status-dropdown { display: block; margin-bottom: 16px; } .system-status-dropdown summary { list-style: none; } .system-status-dropdown summary::-webkit-details-marker { display: none; } .system-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; cursor: pointer; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.032); } .system-summary-copy { display: grid; gap: 4px; min-width: 0; } .system-summary-copy strong { color: var(--ops-text); font-size: 1rem; } .system-summary-copy span:last-child { color: var(--ops-muted); font-size: 0.86rem; } .system-summary-actions { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .system-dropdown-cue { min-width: 52px; color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.72rem; font-weight: 700; text-align: right; text-transform: uppercase; } .system-status-dropdown[open] .system-dropdown-cue::before { content: "Close"; font-size: 0.72rem; } .system-status-dropdown[open] .system-dropdown-cue { font-size: 0; } .system-status-dropdown .system-list { margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .system-status-dropdown .system-item { grid-template-columns: auto minmax(0, 1fr) auto; } .system-status-dropdown .system-actions { flex-wrap: nowrap; } .system-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .system-list, .service-ecosystem, .recent-grid, .portal-item-list, .portal-comment-list, .quick-action-grid { display: grid; gap: 10px; } .system-item, .service-row, .recent-card, .admin-table-row, .user-directory-row, .portal-item-row, .portal-discovery-item, .connection-item { border: 1px solid var(--ops-line-soft) !important; border-radius: var(--ops-radius) !important; background: rgba(255, 255, 255, 0.032) !important; color: var(--ops-text) !important; box-shadow: none !important; } .system-item, .service-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; text-decoration: none; } .system-meta, .service-row span:nth-child(2) { display: grid; gap: 2px; min-width: 0; } .system-name, .service-row strong { color: var(--ops-text); } .system-test-message, .service-row small { color: var(--ops-muted); font-size: 0.78rem; } .find-panel .find-header { display: grid; gap: 6px; } .find-panel .find-header h1 { margin: 0; font-size: clamp(1.12rem, 1.5vw, 1.38rem); line-height: 1.12; } .find-panel h2 { font-size: 1.22rem; } .find-panel .lede { font-size: 0.9rem; line-height: 1.45; } .system-actions { display: inline-flex; align-items: center; gap: 8px; } .system-state, .small-pill, .user-grid-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 8px; border-radius: var(--ops-radius); border: 1px solid rgba(126, 215, 255, 0.22); background: rgba(14, 165, 233, 0.14); color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.7rem; font-weight: 700; white-space: nowrap; text-transform: uppercase; } .system-pill-up, .system-pill-online, .small-pill.is-positive { border-color: rgba(133, 239, 172, 0.28); background: rgba(34, 197, 94, 0.14); color: var(--ops-green); } .system-pill-down, .system-pill-failed, .user-grid-pill.is-blocked { border-color: rgba(255, 141, 141, 0.34); background: rgba(239, 68, 68, 0.16); color: var(--ops-red); } .system-pill-degraded, .system-pill-warning { border-color: rgba(255, 208, 130, 0.34); background: rgba(245, 158, 11, 0.14); color: var(--ops-warn); } .small-pill.is-muted, .user-grid-pill.is-disabled, .system-pill-not_configured, .system-pill-unknown, .system-pill-idle { border-color: rgba(174, 183, 206, 0.2); background: rgba(174, 183, 206, 0.08); color: var(--ops-muted); } .recent-card { display: grid; grid-template-columns: auto minmax(0, 1fr); text-align: left; } .recent-poster, .request-poster { border-radius: var(--ops-radius) !important; border: 1px solid var(--ops-line); } .search, .portal-discovery-form { grid-template-columns: minmax(0, 1fr) auto; } .filters-compact, .portal-toolbar, .admin-toolbar, .users-page-toolbar, .user-directory-search-panel, .user-directory-bulk-panel { border-radius: var(--ops-radius-lg); border: 1px solid var(--ops-line); background: rgba(255, 255, 255, 0.024); } .pill-group button { background: rgba(14, 165, 233, 0.12); color: var(--ops-cyan); border-color: rgba(126, 215, 255, 0.2); } .admin-shell { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); grid-template-areas: "nav main"; gap: 18px; align-items: start; } .admin-shell.admin-shell--with-rail { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "nav main rail"; } .admin-shell-nav { grid-area: nav; position: sticky; top: 116px; } .admin-card { grid-area: main; } .admin-shell-rail { grid-area: rail; position: sticky; top: 116px; } .admin-sidebar { gap: 18px; padding: 14px; border-radius: var(--ops-radius-lg); border: 1px solid var(--ops-line); background: rgba(255, 255, 255, 0.026); } .admin-nav-links a { display: flex; align-items: center; min-height: 36px; border-radius: var(--ops-radius); background: transparent; color: var(--ops-muted); } .admin-nav-links a:hover, .admin-nav-links a.is-active { border-color: rgba(126, 215, 255, 0.22); background: rgba(14, 165, 233, 0.13); color: var(--ops-text); } .admin-header { padding-bottom: 18px; border-bottom: 1px solid var(--ops-line-soft); } .admin-header h1 { margin-top: 8px; } .admin-zone { padding: 18px; } .admin-zone-stack { display: grid; gap: 16px; } .config-subsection-nav { display: grid; gap: 11px; padding: 14px 16px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.024); } .config-subsection-nav > span { color: var(--ops-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .config-subsection-nav > div { display: flex; flex-wrap: wrap; gap: 8px; } .config-subsection-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 11px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.022); color: var(--ops-text); font-size: 0.76rem; font-weight: 700; text-decoration: none; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .config-subsection-nav a:hover { transform: translateY(-1px); border-color: rgba(126, 215, 255, 0.38); background: rgba(14, 165, 233, 0.09); } .config-subsection-nav a small { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.64rem; } .config-subsection { scroll-margin-top: 124px; } .config-subsection-heading { display: grid; gap: 4px; } .fleet-status-panel { display: grid; gap: 16px; border-color: rgba(126, 215, 255, 0.2); background: radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.1), transparent 38%), rgba(255, 255, 255, 0.024); } .fleet-status-header { align-items: center; } .fleet-status-header > div { display: grid; gap: 5px; } .fleet-status-header h2 { margin: 0; } .fleet-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .fleet-service-card { display: grid; gap: 13px; min-width: 0; padding: 15px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(3, 8, 20, 0.24); } .fleet-service-card.system-down { border-color: rgba(255, 141, 141, 0.3); } .fleet-service-card.system-degraded { border-color: rgba(255, 208, 130, 0.3); } .fleet-service-title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px; } .fleet-service-title > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .fleet-service-title h3 { margin: 0; } .fleet-service-card p { min-height: 2.8em; margin: 0; color: var(--ops-muted); font-size: 0.84rem; line-height: 1.45; } .fleet-service-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--ops-line-soft); } .fleet-service-actions a { color: var(--ops-cyan); font-size: 0.78rem; font-weight: 700; text-decoration: none; } .fleet-service-actions button { min-height: 34px; padding: 7px 10px; font-size: 0.75rem; } .admin-rail-action { display: inline-flex; margin-top: 12px; color: var(--ops-cyan); font-size: 0.8rem; font-weight: 700; text-decoration: none; } .admin-table { overflow-x: auto; } .admin-table-head, .admin-table-row, .user-directory-header, .user-directory-row, .cache-row { grid-template-columns: minmax(260px, 2fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(170px, 1fr); } .admin-table-head, .user-directory-header, .cache-head { color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } .admin-table-row, .user-directory-row { min-width: 0; padding: 12px 14px; } .admin-table-head { min-width: 0; } .admin-pagination { color: var(--ops-muted); } .dashboard-activity-table .admin-table-row span:first-child { font-weight: 700; } .dashboard-activity-table .admin-table-head, .dashboard-activity-table .admin-table-row { grid-template-columns: minmax(150px, 1.45fr) minmax(120px, 0.9fr) minmax(72px, 0.55fr) minmax(135px, 0.9fr); } .dashboard-activity-table .admin-table-row span, .dashboard-activity-table .admin-table-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quick-action-grid { grid-template-columns: 1fr; } .quick-action-grid a { padding: 10px 12px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.032); color: var(--ops-text); text-decoration: none; } .ops-status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ops-status-strip span { padding: 12px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; text-transform: uppercase; } .portal-page { gap: 18px; } .portal-page > .user-directory-panel-header:first-child { min-height: 190px; padding: 28px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: linear-gradient(135deg, rgba(90, 80, 240, 0.2), transparent 42%), var(--ops-panel); } .portal-workspace-switch { display: flex; gap: 8px; } .portal-workspace-switch button.is-active { background: rgba(14, 165, 233, 0.18); color: var(--ops-cyan); } .portal-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .portal-overview-card { min-height: 110px; padding: 16px; } .portal-overview-card strong { color: var(--ops-primary-2); font-size: 2rem; } .portal-workspace { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 14px; } .portal-item-row { width: 100%; justify-content: stretch; } .portal-item-row.is-active { border-color: rgba(126, 215, 255, 0.62) !important; background: rgba(14, 165, 233, 0.12) !important; } .portal-item-row-title strong, .portal-comment-card strong { color: var(--ops-text); } .portal-item-row p, .portal-item-row-meta, .portal-comment-card header { color: var(--ops-muted); } .portal-form-grid, .settings-grid, .compact-form { gap: 14px; } .portal-comments-block { border-top-color: var(--ops-line); } .request-detail-page { gap: 22px; } .request-header { align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--ops-line-soft); } .request-header-main { align-items: center; } .status-box { grid-template-columns: repeat(2, minmax(0, 1fr)); } .status-text { color: var(--ops-primary-2); font-size: clamp(1.5rem, 3vw, 2.8rem); } .pipeline-map, .actions, .history, .request-error-state { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.024); } .pipeline-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .pipeline-step { display: grid; gap: 8px; justify-items: center; padding: 12px 8px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); color: var(--ops-muted); text-align: center; } .pipeline-step.is-active { border-color: rgba(126, 215, 255, 0.48); background: rgba(14, 165, 233, 0.14); color: var(--ops-cyan); } .pipeline-step.is-complete { color: var(--ops-green); } .pipeline-dot, .timeline-marker { background: var(--ops-cyan); } .timeline::before { background: linear-gradient(180deg, var(--ops-cyan), transparent); } .timeline-card pre, .log-viewer { border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: #050914; color: #d9e4ff; } .timeline-title { color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; } .timeline-sublist li { border-bottom: 1px solid var(--ops-line-soft); padding-bottom: 8px; } .request-error-state { min-height: 340px; align-content: center; justify-items: start; } .request-error-state h1 { max-width: 680px; } .request-error-state p { max-width: 640px; color: var(--ops-muted); } .request-error-actions { display: flex; flex-wrap: wrap; gap: 10px; } .settings-nav, .settings-links, .settings-section-actions, .user-bulk-actions, .users-page-toolbar-actions, .admin-toolbar-actions { gap: 10px; } .settings-links a { border-radius: var(--ops-radius); border: 1px solid var(--ops-line-soft); background: rgba(255, 255, 255, 0.028); } .settings-links a.is-active { border-color: rgba(126, 215, 255, 0.38); background: rgba(14, 165, 233, 0.13); color: var(--ops-cyan); } .settings-section-actions { padding-top: 14px; border-top: 1px solid var(--ops-line-soft); } .admin-form .admin-zone { display: grid; gap: 14px; padding: 20px; } .admin-form .admin-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .admin-form .admin-grid > label { align-content: start; min-width: 0; padding: 14px; text-align: left; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.022); } .admin-form .admin-grid > label:focus-within { border-color: rgba(126, 215, 255, 0.38); background: rgba(14, 165, 233, 0.055); } .admin-form .admin-grid label[data-helper]::after { min-height: 2.8em; color: var(--ops-muted); font-family: Manrope, "Segoe UI", sans-serif; font-size: 0.76rem; font-weight: 500; line-height: 1.4; text-align: left; text-transform: none; } .admin-form .label-row { align-items: flex-start; gap: 12px; } .admin-form .label-row > span:first-child { color: var(--ops-text); } .admin-form .label-row .meta { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--ops-line-soft); border-radius: 999px; color: var(--ops-faint); font-size: 0.62rem; line-height: 1.2; text-transform: none; } .admin-form .admin-grid input, .admin-form .admin-grid select, .admin-form .admin-grid textarea { width: 100%; } .admin-form .section-header h2 { margin: 0; } .admin-form .settings-section-actions { align-items: end; justify-content: flex-end; } .service-status-panel { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr); gap: 18px; align-items: center; } .service-status-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; } .service-status-summary .system-dot { width: 14px; height: 14px; } .service-status-grid { display: grid; grid-template-columns: minmax(88px, 0.65fr) minmax(130px, 0.85fr) minmax(190px, 1.15fr) minmax(132px, auto); gap: 10px; align-items: stretch; } .service-status-grid > div { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.03); } .service-status-grid span { color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.72rem; text-transform: uppercase; } .service-status-grid strong { overflow-wrap: normal; color: var(--ops-text); text-transform: capitalize; white-space: nowrap; } .settings-inline-field { min-width: min(100%, 280px); } .field-span-full { grid-column: 1 / -1; } .users-page-toolbar-grid, .users-summary-grid, .users-page-overview-grid { gap: 12px; } .user-directory-list { display: grid; gap: 8px; overflow-x: auto; } .user-directory-row { text-decoration: none; } .user-directory-row-chevron { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.72rem; text-transform: uppercase; } .modal-backdrop { background: rgba(3, 7, 18, 0.72); backdrop-filter: blur(10px); } @media (max-width: 1180px) { .ops-metric-grid, .portal-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .layout-grid, .admin-shell, .admin-shell.admin-shell--with-rail, .portal-workspace { grid-template-columns: 1fr; grid-template-areas: "nav" "main" "rail"; } .admin-shell-nav, .admin-shell-rail { position: static; } .admin-sidebar { display: flex; overflow-x: auto; } .service-status-panel, .service-status-grid { grid-template-columns: 1fr; } .service-status-grid strong { white-space: normal; overflow-wrap: anywhere; } .admin-nav-group { min-width: 190px; } .side-panel { position: static; } .home-command { grid-template-columns: 1fr; align-items: stretch; } } @media (max-width: 780px) { body { font-size: 14px; } .page { padding: 0 14px 90px; } .header { grid-template-columns: minmax(0, 1fr) auto !important; margin: 0 -14px; padding: 12px 14px; backdrop-filter: none; } .tagline { display: none; } .brand-logo--header { width: 28px; height: 28px; } .header-nav { grid-column: auto !important; grid-row: auto !important; position: fixed !important; left: 0; right: 0; top: auto !important; bottom: 0; z-index: 1000; margin: 0; padding: 8px 10px; border-top: 1px solid var(--ops-line); background: rgba(8, 14, 31, 0.96); backdrop-filter: blur(18px); } .header-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .header-actions a { display: grid; gap: 3px; min-height: 52px; padding: 6px 4px; font-size: 0.67rem; } .beta-chip { min-height: 28px; padding: 4px 9px; } .header-right { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; width: auto !important; justify-content: flex-end !important; } .card, .admin-card { padding: 16px; } .auth-screen { grid-template-columns: 1fr; gap: 16px; min-height: auto; padding: 18px 0; } .auth-hero { min-height: auto; padding: 24px; } .auth-mark { width: 64px; height: 64px; } .auth-mark .brand-logo--login { width: 44px; height: 44px; } .ops-metric-grid, .home-metric-strip, .home-recent-grid, .fleet-service-grid, .portal-overview-grid, .status-box, .history-grid, .summary, .ops-status-strip, .pipeline-steps { grid-template-columns: 1fr; } .home-metric-strip > div { border-right: 0; border-bottom: 1px solid var(--ops-line-soft); } .home-metric-strip > div:last-child { border-bottom: 0; } .home-search-row { grid-template-columns: 1fr; } .home-command, .home-search-results, .home-recent { padding: 16px; } .home-section-heading { align-items: stretch; flex-direction: column; } .home-recent-grid .recent-card { grid-template-columns: auto minmax(0, 1fr); } .recent-open-cue { display: none; } .search, .portal-discovery-form, .portal-toolbar, .portal-form-grid, .settings-grid { grid-template-columns: 1fr; } .portal-field-span-2, .field-span-full { grid-column: auto; } .system-status, .recent-header, .find-header, .section-header, .user-directory-panel-header, .admin-header, .admin-toolbar, .request-header { flex-direction: column; align-items: stretch; } .service-status-panel, .service-status-grid { grid-template-columns: 1fr; } .admin-table-head, .admin-table-row, .user-directory-header, .user-directory-row, .cache-row { min-width: 0; grid-template-columns: 1fr; } } /* Request detail overhaul: one evidence-led status and collection journey. */ .request-detail-page { --request-green: #48e0b2; --request-cyan: #7ed7ff; --request-amber: #ffc56d; --request-red: #ff8d9d; display: grid; gap: 20px; } .request-detail-page .request-header { margin: 0; } .request-detail-page .section-kicker { display: block; margin-bottom: 6px; color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .request-overview, .request-repair-activity, .request-journey, .request-advanced { border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: radial-gradient(circle at 8% 0%, rgba(79, 70, 229, 0.1), transparent 32%), rgba(255, 255, 255, 0.018); } .request-overview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); overflow: hidden; } .request-repair-activity { display: grid; gap: 16px; padding: 18px 20px; border-color: rgba(126, 215, 255, 0.3); background: radial-gradient(circle at 6% 0%, rgba(14, 165, 233, 0.13), transparent 34%), rgba(255, 255, 255, 0.018); } .request-repair-activity.is-complete { border-color: rgba(72, 224, 178, 0.34); } .request-repair-activity.is-attention { border-color: rgba(255, 141, 157, 0.4); } .request-repair-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .request-repair-heading h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.55rem); } .request-repair-heading p { max-width: 88ch; margin: 7px 0 0; color: var(--ops-muted); line-height: 1.5; } .request-repair-meta { display: grid; justify-items: end; gap: 7px; color: var(--ops-muted); } .request-repair-meta small { white-space: nowrap; font-size: 0.7rem; } .request-repair-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .request-repair-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; min-width: 0; padding: 12px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.022); } .request-repair-step > i { width: 10px; height: 10px; margin-top: 3px; border: 2px solid currentColor; border-radius: 50%; color: var(--ops-muted); } .request-repair-step.is-complete > i { color: var(--request-green); background: currentColor; } .request-repair-step.is-active > i { color: var(--request-cyan); box-shadow: 0 0 12px currentColor; animation: request-operation-pulse 1.15s ease-in-out infinite; } .request-repair-step.is-attention > i { color: var(--request-red); background: currentColor; } .request-repair-step > div { display: grid; gap: 4px; min-width: 0; } .request-repair-step strong { color: var(--ops-text); font-size: 0.76rem; } .request-repair-step span { color: var(--ops-muted); font-size: 0.72rem; line-height: 1.4; } .request-overview-block { grid-column: span 6; display: grid; align-content: start; gap: 7px; min-height: 118px; padding: 20px; border-right: 1px solid var(--ops-line-soft); border-bottom: 1px solid var(--ops-line-soft); } .request-overview-block:nth-child(even) { border-right: 0; } .request-overview-block p, .request-overview-block small { color: var(--ops-muted); line-height: 1.55; } .request-overview-block > strong { color: var(--ops-text); font-size: 1rem; line-height: 1.4; } .request-overview-status > strong { max-width: 820px; color: var(--request-cyan); font-size: clamp(1.35rem, 2.4vw, 2.35rem); letter-spacing: -0.035em; } .request-overview-label { color: var(--ops-text); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; } .request-next-step { grid-column: 1 / -1; min-height: 0; border-right: 0; border-bottom: 0; background: linear-gradient(90deg, rgba(14, 165, 233, 0.08), rgba(79, 70, 229, 0.08)); } .request-next-step-main { display: flex; align-items: center; justify-content: space-between; gap: 28px; } .request-next-step-copy { display: grid; gap: 7px; min-width: 0; } .request-next-step-copy > strong { color: var(--ops-text); font-size: 1rem; line-height: 1.4; } .request-next-step-copy > p { margin: 0; } .request-watch-button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 240px; min-height: 48px; padding: 12px 20px; border: 1px solid rgba(72, 224, 178, 0.62); border-radius: var(--ops-radius); background: linear-gradient(115deg, rgba(16, 185, 129, 0.92), rgba(14, 165, 233, 0.9)); color: #fff; box-shadow: 0 10px 28px rgba(14, 165, 233, 0.16); font-size: 0.84rem; font-weight: 800; text-decoration: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .request-watch-button:hover { border-color: rgba(126, 255, 214, 0.9); box-shadow: 0 12px 34px rgba(14, 165, 233, 0.24); transform: translateY(-1px); } .request-watch-button > span { font-size: 1rem; } .request-action-row, .request-stage-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; } .request-action-row button, .request-stage-actions button, .request-release button { min-height: 38px; border: 1px solid rgba(126, 215, 255, 0.32); border-radius: var(--ops-radius); background: linear-gradient(115deg, rgba(79, 70, 229, 0.92), rgba(14, 165, 233, 0.88)); color: #fff; font-size: 0.78rem; font-weight: 750; } .request-action-row .request-recheck-button { margin-left: auto; border-color: var(--ops-line); background: rgba(255, 255, 255, 0.035); color: var(--ops-text); } .request-action-row .request-recheck-button:hover:not(:disabled) { border-color: rgba(126, 215, 255, 0.48); background: rgba(126, 215, 255, 0.09); } .request-action-feedback { grid-column: 1 / -1; padding: 13px 18px; border-top: 1px solid var(--ops-line-soft); color: var(--request-green); background: rgba(72, 224, 178, 0.07); } .request-action-feedback.is-error { color: var(--request-red); background: rgba(255, 86, 113, 0.08); } .request-operation-progress { grid-column: 1 / -1; display: grid; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--ops-line-soft); background: rgba(5, 9, 20, 0.42); } .request-operation-progress.is-running { background: rgba(14, 165, 233, 0.055); } .request-operation-progress.is-error { background: rgba(255, 86, 113, 0.055); } .request-operation-heading, .request-operation-heading-actions, .request-operation-event { display: flex; align-items: center; gap: 12px; } .request-operation-heading { justify-content: space-between; } .request-operation-heading > div:first-child { display: grid; gap: 4px; } .request-operation-heading > div:first-child > strong { color: var(--ops-text); font-size: 0.94rem; } .request-operation-heading-actions { color: var(--ops-muted); font-size: 0.7rem; } .request-operation-heading-actions button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--ops-line); background: rgba(255, 255, 255, 0.035); color: var(--ops-text); font-size: 0.7rem; } .request-operation-status { padding: 5px 8px; border: 1px solid var(--ops-line); border-radius: 999px; color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.62rem; font-weight: 750; text-transform: uppercase; } .request-operation-status.is-running { border-color: rgba(126, 215, 255, 0.36); color: var(--ops-cyan); } .request-operation-status.is-complete { border-color: rgba(72, 224, 178, 0.3); color: var(--request-green); } .request-operation-status.is-error { border-color: rgba(255, 86, 113, 0.34); color: var(--request-red); } .request-operation-events { display: grid; gap: 7px; } .request-operation-event { min-width: 0; padding: 10px 12px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.022); } .request-operation-event > i { flex: 0 0 auto; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; color: var(--ops-muted); } .request-operation-event.is-active > i { color: var(--ops-cyan); box-shadow: 0 0 12px currentColor; animation: request-operation-pulse 1.15s ease-in-out infinite; } .request-operation-event.is-complete > i { color: var(--request-green); background: currentColor; } .request-operation-event.is-error > i { color: var(--request-red); background: currentColor; } .request-operation-event > div { display: grid; gap: 2px; min-width: 0; } .request-operation-event strong { color: var(--ops-text); font-size: 0.75rem; } .request-operation-event span { color: var(--ops-muted); font-size: 0.75rem; } .request-operation-event small { margin-left: auto; color: var(--ops-muted); font-size: 0.66rem; white-space: nowrap; } @keyframes request-operation-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } .request-journey { display: grid; gap: 18px; padding: 20px; } .request-journey-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .request-journey-heading h2 { font-size: clamp(1.3rem, 2.2vw, 2rem); letter-spacing: -0.03em; } .request-live-indicator { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 6px 10px; border: 1px solid rgba(72, 224, 178, 0.24); border-radius: 999px; color: var(--request-green); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; } .request-live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; } .request-stage-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; } .request-stage { position: relative; grid-column: span 4; display: grid; align-content: start; gap: 10px; min-height: 170px; padding: 16px; overflow: hidden; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); color: var(--ops-text); text-decoration: none; } .request-stage::before { position: absolute; inset: 0 0 auto; height: 2px; background: var(--ops-line-soft); content: ""; } .request-stage h3 { font-size: 1rem; } .request-stage p, .request-stage span { color: var(--ops-muted); font-size: 0.78rem; line-height: 1.48; } .request-stage.stage-complete { border-color: rgba(72, 224, 178, 0.25); background: linear-gradient(180deg, rgba(72, 224, 178, 0.1), rgba(72, 224, 178, 0.025)); } .request-stage.stage-complete::before { background: var(--request-green); box-shadow: 0 0 18px rgba(72, 224, 178, 0.7); } .request-stage.stage-active { border-color: rgba(126, 215, 255, 0.44); background: linear-gradient(180deg, rgba(14, 165, 233, 0.14), rgba(79, 70, 229, 0.045)); box-shadow: inset 0 0 36px rgba(14, 165, 233, 0.035); } .request-stage.stage-active::before { background: var(--request-cyan); box-shadow: 0 0 20px rgba(126, 215, 255, 0.78); } .request-stage.stage-partial { border-color: rgba(255, 197, 109, 0.35); background: linear-gradient(180deg, rgba(255, 197, 109, 0.11), rgba(255, 197, 109, 0.025)); } .request-stage.stage-partial::before, .request-stage.stage-attention::before { background: var(--request-amber); box-shadow: 0 0 18px rgba(255, 197, 109, 0.62); } .request-stage.stage-attention { border-color: rgba(255, 197, 109, 0.32); } .request-stage.is-link:hover { transform: translateY(-2px); border-color: rgba(72, 224, 178, 0.58); } .request-stage-topline, .request-meter-copy, .request-season-row, .request-missing-list > div, .request-torrent > div, .request-diagnostic > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .request-stage-number { color: var(--ops-cyan) !important; font-family: "JetBrains Mono", Consolas, monospace; font-weight: 800; } .request-stage-state { padding: 3px 7px; border: 1px solid currentColor; border-radius: 999px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.6rem !important; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .request-stage-state.state-complete { color: var(--request-green); } .request-stage-state.state-active { color: var(--request-cyan); } .request-stage-state.state-partial, .request-stage-state.state-attention { color: var(--request-amber); } .request-stage-state.state-waiting { color: var(--ops-muted); } .request-availability-meter, .request-missing-list, .request-torrent { display: grid; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--ops-line-soft); } .request-meter-track { height: 7px; overflow: hidden; border: 1px solid var(--ops-line-soft); border-radius: 999px; background: rgba(255, 255, 255, 0.06); } .request-meter-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--request-green), var(--request-cyan)); box-shadow: 0 0 14px rgba(72, 224, 178, 0.5); } .request-meter-track.is-live-download > span { transition: width 1.8s linear; will-change: width; } .request-season-row, .request-missing-list > div { padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.045); } .request-missing-list strong, .request-torrent strong { overflow-wrap: anywhere; color: var(--ops-text); font-size: 0.74rem; } .request-stage-actions { margin-top: auto; padding-top: 6px; } .request-stage-actions button { width: 100%; padding-inline: 10px; font-size: 0.7rem; } .request-stage-link { margin-top: auto; color: var(--request-green) !important; font-weight: 750; } .request-release-modal-layer { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: max(18px, 4vh) 18px; } .request-release-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(2, 6, 18, 0.82); backdrop-filter: blur(8px); cursor: default; } .request-release-modal { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(980px, 100%); max-height: min(820px, 92vh); overflow: hidden; border: 1px solid rgba(126, 215, 255, 0.42); border-radius: var(--ops-radius-lg); background: linear-gradient(145deg, rgba(19, 29, 48, 0.99), rgba(9, 15, 29, 0.99)); box-shadow: 0 34px 100px rgba(0, 0, 0, 0.68), inset 0 2px 0 rgba(126, 215, 255, 0.72); } .request-release-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px; border-bottom: 1px solid var(--ops-line); background: rgba(13, 21, 39, 0.96); } .request-release-modal-header > div { display: grid; gap: 5px; } .request-release-modal-header h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); } .request-release-modal-header p { margin: 0; color: var(--ops-muted); font-size: 0.8rem; } .request-release-modal-body { display: grid; gap: 12px; min-height: 0; padding: 16px; overflow: auto; } .request-release-list { display: grid; gap: 9px; } .request-release { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.025); } .request-release.is-best-pick { border-color: rgba(72, 224, 178, 0.48); background: linear-gradient(135deg, rgba(72, 224, 178, 0.13), rgba(14, 165, 233, 0.06)); box-shadow: inset 3px 0 0 var(--request-green); } .request-release-copy { display: grid; gap: 5px; min-width: 0; } .request-release-copy > strong { overflow: hidden; color: var(--ops-text); text-overflow: ellipsis; white-space: nowrap; } .request-release-copy > span, .request-release-copy > small { color: var(--ops-muted); font-size: 0.72rem; line-height: 1.4; } .request-release-copy > small { color: #a8cfc6; } .request-release-badges { display: flex; flex-wrap: wrap; gap: 6px; } .request-release-badges > span { padding: 3px 7px; border: 1px solid rgba(126, 215, 255, 0.22); border-radius: 999px; color: #b7dff2; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.61rem; font-weight: 700; text-transform: uppercase; } .request-release-badges > .request-release-best-badge { border-color: rgba(72, 224, 178, 0.48); background: rgba(72, 224, 178, 0.12); color: var(--request-green); } .request-release-profile-note, .request-release-empty, .request-release-searching { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid rgba(126, 215, 255, 0.24); border-radius: var(--ops-radius); background: rgba(14, 165, 233, 0.065); } .request-release-profile-note, .request-release-empty { display: grid; gap: 4px; } .request-release-profile-note strong, .request-release-empty strong, .request-release-searching strong { color: var(--ops-text); font-size: 0.82rem; } .request-release-profile-note span, .request-release-empty span, .request-release-searching span { color: var(--ops-muted); font-size: 0.75rem; line-height: 1.45; } .request-release-empty { min-height: 150px; align-content: center; justify-items: center; text-align: center; } .request-release-empty.is-error { border-color: rgba(255, 112, 131, 0.36); background: rgba(255, 112, 131, 0.07); } .request-release-searching > i { flex: 0 0 16px; width: 16px; height: 16px; border: 2px solid rgba(126, 215, 255, 0.22); border-top-color: var(--request-cyan); border-radius: 50%; animation: request-release-spin 0.8s linear infinite; } .request-release-searching > div { display: grid; gap: 3px; } @keyframes request-release-spin { to { transform: rotate(360deg); } } .request-advanced { overflow: hidden; } .request-advanced-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 18px; border: 0; border-radius: 0; background: transparent; color: var(--ops-text); text-align: left; } .request-advanced-toggle > span:first-child { display: grid; gap: 3px; } .request-advanced-toggle small { color: var(--ops-muted); font-weight: 400; } .request-advanced-content { display: grid; gap: 16px; padding: 0 16px 16px; border-top: 1px solid var(--ops-line-soft); } .request-diagnostics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 16px; } .request-diagnostic { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.025); } .request-diagnostic pre { max-height: 260px; margin: 0; padding: 10px; overflow: auto; border-radius: var(--ops-radius); background: #050914; color: #cfd9ee; font-size: 0.7rem; white-space: pre-wrap; } .request-advanced .summary-card li { display: grid; gap: 3px; } .request-advanced .summary-card small { color: var(--ops-muted); } @media (max-width: 980px) { .request-stage { grid-column: span 6; } .request-repair-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .request-overview-block, .request-next-step, .request-stage { grid-column: 1 / -1; } .request-overview-block { min-height: 0; border-right: 0; } .request-journey, .request-overview-block { padding: 15px; } .request-journey-heading, .request-release { grid-template-columns: 1fr; } .request-live-indicator { align-self: flex-start; } .request-diagnostics-grid { grid-template-columns: 1fr; } .request-action-row, .request-stage-actions { display: grid; } .request-next-step-main { align-items: stretch; flex-direction: column; } .request-watch-button { width: 100%; min-width: 0; } .request-action-row button, .request-release button { width: 100%; } .request-release-modal-layer { padding: 10px; } .request-release-modal { max-height: 94vh; } .request-release-modal-header { padding: 16px; } .request-release-modal-body { padding: 12px; } .request-operation-heading { align-items: flex-start; flex-direction: column; } .request-repair-heading { flex-direction: column; } .request-repair-meta { justify-items: start; } .request-repair-steps { grid-template-columns: 1fr; } .request-operation-heading-actions { width: 100%; flex-wrap: wrap; } .request-operation-event { align-items: flex-start; } } /* Progressive request portal */ .request-portal-page { display: grid; gap: 18px; padding: clamp(14px, 2vw, 24px); } .request-portal-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 132px; padding: clamp(20px, 3vw, 34px); overflow: hidden; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: radial-gradient(circle at 12% 0%, rgba(126, 215, 255, 0.17), transparent 32%), linear-gradient(120deg, rgba(79, 70, 229, 0.13), transparent 50%), var(--ops-panel); } .request-portal-hero > div:first-child { display: grid; gap: 7px; max-width: 720px; } .request-portal-hero h1 { font-size: clamp(1.75rem, 4vw, 3rem); letter-spacing: -0.045em; } .request-portal-hero p { max-width: 650px; margin: 0; color: var(--ops-muted); line-height: 1.55; } .request-portal-route { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; } .request-portal-route span { padding: 7px 10px; border: 1px solid var(--ops-line); border-radius: 999px; background: rgba(255, 255, 255, 0.035); color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; font-weight: 750; text-transform: uppercase; } .request-portal-route i { width: 18px; height: 1px; background: linear-gradient(90deg, var(--ops-line), var(--ops-cyan)); } .request-flow-alert { margin: 0; } .request-flow-stage { position: relative; display: grid; gap: 20px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); animation: request-flow-arrive 0.34s ease both; } .request-flow-stage:not(:last-child)::after { position: absolute; bottom: -19px; left: 44px; width: 1px; height: 19px; background: linear-gradient(var(--ops-cyan), rgba(126, 215, 255, 0.15)); content: ""; } .request-flow-stage.is-current { border-color: rgba(126, 215, 255, 0.24); } @keyframes request-flow-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .request-flow-heading { display: flex; align-items: center; gap: 13px; } .request-flow-heading > div { display: grid; gap: 2px; } .request-flow-heading > div > span, .request-selection-summary small, .request-existing-state span, .request-submit-bar span, .request-submit-progress header span { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; font-weight: 750; letter-spacing: 0.055em; text-transform: uppercase; } .request-flow-heading h2 { font-size: clamp(1.15rem, 2.2vw, 1.65rem); letter-spacing: -0.025em; } .request-flow-number { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(126, 215, 255, 0.34); border-radius: 50%; background: rgba(14, 165, 233, 0.1); color: var(--ops-cyan); box-shadow: 0 0 22px rgba(14, 165, 233, 0.09); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.7rem; font-weight: 800; } .request-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .request-type-card { display: block; min-height: 174px; padding: 20px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.025); color: var(--ops-text); text-align: left; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .request-type-card:hover { transform: translateY(-2px); border-color: rgba(126, 215, 255, 0.5); } .request-type-card.is-selected { border-color: rgba(72, 224, 178, 0.58); background: linear-gradient(135deg, rgba(72, 224, 178, 0.11), rgba(14, 165, 233, 0.06)); } .request-type-card-body { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 132px; } .request-type-card-copy { display: grid; justify-items: start; gap: 7px; min-width: 0; } .request-type-card-copy > span:first-child { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; text-transform: uppercase; } .request-service-icon { flex: 0 0 auto; display: grid; place-items: center; width: 70px; height: 70px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.44); border-radius: 16px; background: rgba(245, 248, 252, 0.94); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24); } .request-service-icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .request-type-card.is-selected .request-service-icon { border-color: rgba(72, 224, 178, 0.72); box-shadow: 0 0 24px rgba(72, 224, 178, 0.18); } .request-type-card-copy strong { font-size: 1.35rem; } .request-type-description { max-width: 440px; color: var(--ops-muted); font-weight: 450; line-height: 1.5; text-transform: none !important; } .request-type-card-copy b { color: var(--request-green); font-size: 0.74rem; } .request-flow-search { display: grid; gap: 7px; } .request-flow-search > label, .request-profile-field > span, .request-season-picker legend { color: var(--ops-muted); font-size: 0.75rem; font-weight: 750; text-transform: uppercase; } .request-flow-search > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; } .request-flow-search input { width: 100%; min-height: 48px; } .request-flow-search button { min-width: 150px; } .request-flow-empty { display: grid; gap: 5px; padding: 20px; border: 1px dashed var(--ops-line); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.018); } .request-flow-empty p { margin: 0; color: var(--ops-muted); } .request-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .request-result-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 15px; min-width: 0; min-height: 166px; padding: 11px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.023); color: var(--ops-text); text-align: left; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .request-result-card:hover { transform: translateY(-2px); border-color: rgba(126, 215, 255, 0.4); } .request-result-card.is-selected { border-color: rgba(72, 224, 178, 0.55); background: rgba(72, 224, 178, 0.06); } .request-result-poster, .request-selection-poster { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--ops-line); border-radius: calc(var(--ops-radius) - 2px); background: rgba(255, 255, 255, 0.035); } .request-result-poster { width: 96px; height: 144px; } .request-result-poster img, .request-selection-poster img { width: 100%; height: 100%; object-fit: cover; } .request-result-poster i, .request-selection-poster i { color: var(--ops-muted); font-size: 0.65rem; font-style: normal; } .request-result-copy { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 5px 4px 5px 0; } .request-result-copy small { color: var(--ops-cyan); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; } .request-result-copy strong { font-size: 1rem; } .request-result-copy p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ops-muted); font-size: 0.76rem; font-weight: 450; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .request-result-copy b { align-self: end; margin-top: auto; color: var(--request-green); font-size: 0.71rem; } .request-configure-stage { border-color: rgba(72, 224, 178, 0.28); } .request-selection-summary { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 16px; padding: 13px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.022); } .request-selection-poster { width: 86px; height: 129px; } .request-selection-summary > div { display: grid; gap: 6px; } .request-selection-summary h3 { font-size: clamp(1.15rem, 2vw, 1.55rem); } .request-selection-summary p { max-width: 760px; margin: 0; color: var(--ops-muted); font-size: 0.82rem; line-height: 1.5; } .request-existing-state { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid rgba(72, 224, 178, 0.28); border-radius: var(--ops-radius-lg); background: rgba(72, 224, 178, 0.06); } .request-existing-state > div { display: grid; gap: 5px; } .request-existing-state p { margin: 0; color: var(--ops-muted); } .request-options-layout { display: grid; gap: 16px; } .request-season-picker { display: grid; gap: 11px; margin: 0; padding: 0; border: 0; } .request-season-actions { display: flex; gap: 7px; } .request-season-actions button { padding: 6px 9px; border-color: var(--ops-line); background: rgba(255, 255, 255, 0.025); color: var(--ops-muted); font-size: 0.67rem; } .request-season-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .request-season-grid label { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.022); cursor: pointer; } .request-season-grid label.is-selected { border-color: rgba(72, 224, 178, 0.4); background: rgba(72, 224, 178, 0.07); } .request-season-grid label > span { display: grid; gap: 2px; min-width: 0; } .request-season-grid label strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; } .request-season-grid label small { color: var(--ops-muted); font-size: 0.67rem; } .request-profile-field { display: grid; gap: 7px; max-width: 620px; } .request-profile-field select { min-height: 46px; } .request-profile-field small, .request-submit-bar small { color: var(--ops-muted); font-size: 0.7rem; } .request-submit-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px; border: 1px solid rgba(126, 215, 255, 0.28); border-radius: var(--ops-radius-lg); background: linear-gradient(110deg, rgba(14, 165, 233, 0.09), rgba(79, 70, 229, 0.05)); } .request-submit-bar > div { display: grid; gap: 3px; } .request-submit-bar button { min-width: 180px; } .request-submit-progress { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(126, 215, 255, 0.3); border-radius: var(--ops-radius-lg); background: rgba(14, 165, 233, 0.055); } .request-submit-progress.is-complete { border-color: rgba(72, 224, 178, 0.3); background: rgba(72, 224, 178, 0.045); } .request-submit-progress.is-error { border-color: rgba(255, 86, 113, 0.35); background: rgba(255, 86, 113, 0.05); } .request-submit-progress header { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .request-submit-progress header > div { display: grid; gap: 3px; } .request-submit-progress header small { color: var(--ops-muted); } .request-submit-progress > div { display: grid; gap: 6px; } .request-submit-progress p { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 0; padding: 9px 10px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.02); } .request-submit-progress p > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ops-muted); } .request-submit-progress p.is-active > i { background: var(--ops-cyan); box-shadow: 0 0 12px var(--ops-cyan); animation: request-operation-pulse 1.15s ease-in-out infinite; } .request-submit-progress p.is-complete > i { background: var(--request-green); } .request-submit-progress p.is-error > i { background: var(--request-red); } .request-submit-progress p > span { display: grid; gap: 1px; color: var(--ops-muted); font-size: 0.72rem; } .request-submit-progress p > span strong { color: var(--ops-text); font-size: 0.7rem; } .request-submit-progress p > small { color: var(--ops-muted); font-size: 0.65rem; } .request-complete-actions { display: flex; gap: 9px; justify-content: flex-end; } @media (max-width: 920px) { .request-portal-hero { align-items: flex-start; flex-direction: column; } .request-result-grid { grid-template-columns: 1fr; } .request-season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .request-portal-page { padding: 10px; } .request-portal-route { width: 100%; overflow-x: auto; } .request-type-grid, .request-season-grid { grid-template-columns: 1fr; } .request-type-card-body { align-items: flex-start; } .request-service-icon { width: 58px; height: 58px; padding: 8px; } .request-flow-search > div { grid-template-columns: 1fr; } .request-flow-search button { width: 100%; } .request-result-card { grid-template-columns: 76px minmax(0, 1fr); } .request-result-poster { width: 76px; height: 114px; } .request-selection-summary { grid-template-columns: 66px minmax(0, 1fr); } .request-selection-poster { width: 66px; height: 99px; } .request-existing-state, .request-submit-bar { align-items: stretch; flex-direction: column; } .request-existing-state button, .request-submit-bar button { width: 100%; } .request-submit-progress p { grid-template-columns: auto minmax(0, 1fr); } .request-submit-progress p > small { grid-column: 2; } .request-complete-actions { display: grid; } } /* ========================================================================== */ /* Stitch master layout and component alignment */ /* ========================================================================== */ html, body { background: var(--ops-bg); } body { background-image: none; font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.45; } h1, h2, h3, h4, .brand { font-family: "DM Sans", "Segoe UI", sans-serif; } button, input, select, textarea { font-family: Inter, "Segoe UI", sans-serif; } .page { display: block; width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 64px 0 88px; } .header { position: fixed; inset: 0 0 auto; z-index: 1000; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(480px, auto) minmax(220px, 1fr); grid-template-rows: 64px; align-items: center; width: 100%; height: 64px; margin: 0; padding: 0 24px; border: 0; border-bottom: 1px solid var(--ops-line); background: rgba(14, 14, 16, 0.96); backdrop-filter: blur(16px); } .header-left, .header-right, .header-nav { grid-row: 1; margin: 0; } .header-left { grid-column: 1; } .header-nav { grid-column: 2; } .header-right { grid-column: 3; justify-self: end; } .brand-link { gap: 10px; } .brand-logo--header { width: 32px; height: 32px; } .brand { color: var(--ops-primary-2); font-size: 1.7rem; font-weight: 700; text-transform: none; text-shadow: none; } .tagline { display: none; } .beta-chip { min-height: 28px; padding: 4px 10px; border-color: var(--ops-line); background: var(--ops-panel-2); color: var(--ops-primary-2); font-size: 0.65rem; } .header-actions { gap: 4px; flex-wrap: nowrap; } .header-actions a { min-height: 64px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.76rem; } .header-actions a:hover, .header-actions a.is-active { border-color: var(--ops-primary-2); background: transparent; color: var(--ops-primary-2); } .user-view-toggle { min-height: 32px; border-color: var(--ops-line); background: var(--ops-primary); color: var(--ops-primary-2); } .avatar-button { width: 34px; height: 34px; border-radius: 50%; background: var(--ops-panel-3); } .signed-in-dropdown { background: #1c1b1d; } .workspace-sidebar { position: fixed; inset: 64px auto 0 0; z-index: 90; display: flex; width: 280px; padding: 24px 16px 18px; flex-direction: column; gap: 22px; border-right: 1px solid var(--ops-line); background: #201f21; } .workspace-sidebar-identity { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; } .workspace-sidebar-logo { width: 42px; height: 42px; border-radius: 8px; } .workspace-sidebar-identity > div { display: grid; gap: 2px; min-width: 0; } .workspace-sidebar-identity strong { font-family: "DM Sans", sans-serif; font-size: 1.05rem; } .workspace-sidebar-identity span { overflow: hidden; color: var(--ops-muted); font-family: "JetBrains Mono", monospace; font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; } .workspace-new-request, .admin-new-request { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid #2f3455; border-radius: 8px; background: var(--ops-primary); color: var(--ops-primary-2); font-family: "DM Sans", sans-serif; font-size: 1rem; font-weight: 600; text-decoration: none; } .workspace-new-request span, .admin-new-request span { font-size: 1.4rem; font-weight: 400; } .workspace-sidebar > nav { display: grid; gap: 5px; } .workspace-sidebar > nav a { display: flex; align-items: center; gap: 13px; min-height: 45px; padding: 9px 13px; border: 1px solid transparent; border-radius: 8px; color: var(--ops-muted); font-family: "JetBrains Mono", monospace; font-size: 0.78rem; text-decoration: none; } .workspace-sidebar svg, .workspace-mobile-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .workspace-sidebar > nav a:hover, .workspace-sidebar > nav a.is-active { border-color: rgba(194, 196, 229, 0.12); background: #454652; color: #e5e1e4; } .workspace-sidebar-footer { display: grid; gap: 4px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ops-line); } .workspace-sidebar-footer a { padding: 9px 13px; color: var(--ops-muted); font-family: "JetBrains Mono", monospace; font-size: 0.75rem; text-decoration: none; } .workspace-mobile-nav { display: none; } .page:has(.workspace-sidebar) > main, .page:has(.workspace-sidebar) > .user-view-banner, .page:has(.workspace-sidebar) > .site-banner { width: auto; margin-right: 24px; margin-left: 304px; } .page:has(.workspace-sidebar) > main { max-width: 1600px; margin-top: 0; padding: 32px 0; } .page > .user-view-banner, .page > .site-banner { margin-top: 16px; } .card, .admin-card, .admin-panel, .main-panel, .summary-card, .portal-overview-card, .status-box, .timeline-card, .modal-card, .admin-zone, .admin-rail-card, .users-summary-card, .stat-card { border-color: var(--ops-line) !important; background: var(--ops-panel) !important; } .page:has(.workspace-sidebar) > main.card, .admin-card { border: 0 !important; background: transparent !important; } button:not(.avatar-button), .button { border-radius: 8px; } button:not(.ghost-button):not(.avatar-button):not(.issue-category-card):not(.request-type-card):not(.request-result-card):not(.recent-card), .settings-action-button { border-color: #30365d; background: var(--ops-primary); color: var(--ops-primary-2); box-shadow: none; } .ghost-button, button.ghost-button { border-color: var(--ops-line); background: var(--ops-panel-3); color: var(--ops-text); } input, select, textarea { border-color: var(--ops-line) !important; background: var(--ops-bg-2) !important; color: var(--ops-text) !important; } input:focus, select:focus, textarea:focus { border-color: var(--ops-primary-2) !important; box-shadow: 0 0 0 1px rgba(194, 196, 229, 0.28) !important; } .section-kicker, .eyebrow, .request-overview-label, .request-stage-number, .request-stage-state, .request-flow-heading > div > span, .invite-flow-number, .admin-nav-title { font-family: "JetBrains Mono", monospace !important; } /* My Requests masters */ .home-page { max-width: 1400px !important; gap: 22px; } .home-command { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr); padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--ops-line); border-radius: 0; background: transparent; } .home-command-copy h1 { font-size: 2.25rem; letter-spacing: -0.02em !important; } .home-command-copy p { font-size: 0.9rem; } .home-search-row input, .home-search-row button { min-height: 44px; } .home-metric-strip { display: none; } .home-recent { padding: 0; border: 0; background: transparent; } .home-recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .home-recent-grid .recent-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); grid-template-rows: minmax(118px, 1fr) auto; align-items: stretch; min-height: 250px; padding: 12px; overflow: hidden; border-color: var(--ops-line) !important; border-radius: 12px !important; background: var(--ops-panel-2) !important; } .home-recent-grid .recent-poster { grid-column: 1; grid-row: 1; width: 72px; height: 108px; align-self: start; border-radius: 7px !important; object-fit: cover; } .home-recent-grid .recent-info { display: flex; grid-column: 2; grid-row: 1; flex-direction: column; gap: 9px; min-width: 0; padding: 7px 3px; } .home-recent-grid .recent-title { font-family: "DM Sans", sans-serif; font-size: 1.08rem; } .home-recent-grid .recent-meta { display: flex; align-items: center; gap: 7px; color: var(--ops-muted) !important; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; } .home-recent-grid .recent-meta::before { content: none; } .home-recent-grid .recent-status-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 9px; max-width: 100%; padding: 8px 12px; border: 1px solid #9c8044; border-radius: 8px; background: #352c1b; color: #ffe0a0; font-family: "DM Sans", sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.35; text-align: left; text-transform: none; overflow-wrap: anywhere; } .home-recent-grid .recent-status-badge > span { flex: 0 0 auto; font-size: 1.2rem; } .home-recent-grid .is-ready .recent-status-badge { color: #a7f3cd; background: #16372b; border-color: #398663; } .home-recent-grid .is-processing .recent-status-badge { color: #b6e6ff; background: #183344; border-color: #448bad; } .home-recent-grid .is-attention .recent-status-badge { color: #ffd2b4; background: #40281e; border-color: #aa7150; } .home-recent-grid .is-processing .recent-meta::before { background: var(--ops-primary-2); } .home-recent-grid .is-attention .recent-meta::before { background: var(--ops-coral); } .home-recent-grid .is-ready .recent-meta::before { background: var(--ops-green); } .home-recent-grid .recent-open-cue { grid-column: 1 / -1; grid-row: 2; align-self: end; padding: 9px; border: 1px solid var(--ops-line); border-radius: 6px; background: var(--ops-primary); color: var(--ops-primary-2); text-align: center; } .request-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; } .request-filter-chips button { min-height: 32px; padding: 5px 15px; border: 1px solid var(--ops-line) !important; border-radius: 999px !important; background: var(--ops-panel-3) !important; color: var(--ops-muted) !important; font-size: 0.74rem; } .request-filter-chips button.is-active { border-color: #343b71 !important; background: var(--ops-primary) !important; color: var(--ops-primary-2) !important; } .request-filter-chips i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ops-coral); } /* New Request master */ .request-portal-page { max-width: 1180px !important; } .request-portal-hero { min-height: 0; padding: 0 0 18px; border-bottom: 1px solid var(--ops-line); background: transparent; } .request-portal-hero h1 { font-size: 2rem; } .request-portal-route { background: var(--ops-panel-2); } .request-master-stepper { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 4px 0 16px; padding: 0; list-style: none; } .request-master-stepper::before { position: absolute; top: 15px; right: 10%; left: 10%; height: 1px; background: var(--ops-line); content: ""; } .request-master-stepper li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; color: var(--ops-faint); font-family: "JetBrains Mono", monospace; font-size: 0.68rem; } .request-master-stepper li > span { display: grid; place-items: center; width: 30px; height: 30px; border: 4px solid var(--ops-bg); border-radius: 50%; background: var(--ops-panel-3); } .request-master-stepper li.is-active, .request-master-stepper li.is-complete { color: var(--ops-primary-2); } .request-master-stepper li.is-active > span, .request-master-stepper li.is-complete > span { background: var(--ops-primary-2); color: #2b2f48; box-shadow: 0 0 12px rgba(194, 196, 229, 0.22); } .request-flow-stage { border-color: var(--ops-line); background: var(--ops-panel); } .request-type-card, .request-result-card, .request-selection-summary, .request-existing-state, .request-submit-bar { border-color: var(--ops-line) !important; background: var(--ops-panel-2) !important; } .request-type-card { min-height: 220px; } .request-type-card.is-selected, .request-result-card.is-selected { border-color: var(--ops-primary-2) !important; background: rgba(194, 196, 229, 0.055) !important; box-shadow: 0 0 22px rgba(194, 196, 229, 0.07); } /* Request Details master */ .request-detail-page { max-width: 1500px !important; gap: 24px; } .request-detail-page .request-header { min-height: 180px; padding: 24px; border: 1px solid var(--ops-line); border-radius: 12px; background: var(--ops-panel); } .request-detail-page .request-poster { width: 92px; height: 138px; object-fit: cover; } .request-detail-page .request-header h1 { font-size: clamp(2rem, 4vw, 3rem); } .request-overview, .request-journey, .request-repair-activity, .request-advanced { border-color: var(--ops-line) !important; background: var(--ops-panel) !important; } .request-overview { border-radius: 12px; overflow: hidden; } .request-stage-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .request-stage { min-height: 180px; border-color: var(--ops-line) !important; border-radius: 10px; background: var(--ops-panel-2) !important; } .request-stage.stage-complete { border-top: 3px solid var(--ops-green) !important; background: linear-gradient(180deg, rgba(20, 184, 166, 0.07), var(--ops-panel-2) 38%) !important; } .request-stage.stage-active { border-color: rgba(194, 196, 229, 0.58) !important; border-top: 3px solid var(--ops-primary-2) !important; background: linear-gradient(180deg, rgba(194, 196, 229, 0.08), var(--ops-panel-2) 40%) !important; box-shadow: 0 0 18px rgba(194, 196, 229, 0.08) !important; } .request-stage.stage-attention { border-top: 3px solid var(--ops-warn) !important; } .request-live-indicator { border-color: rgba(20, 184, 166, 0.4); color: #5eead4; } .request-meter-track { background: #353437; } .request-meter-track > span { background: var(--ops-primary-2); } .request-release-modal { background: #201f21; } /* Issues and Invites masters */ .portal-page, .profile-invites-section { max-width: 1500px !important; } .issue-portal-page > .issue-portal-hero { min-height: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--ops-line); border-radius: 0; background: transparent; } .issue-flow, .issue-reports-column, .profile-section, .invite-flow-step, .profile-invites-list { border-color: var(--ops-line) !important; background: var(--ops-panel) !important; } .issue-category-card { border-color: var(--ops-line-soft); background: var(--ops-panel-2); } .issue-category-card.is-selected { border-color: var(--ops-primary-2); background: rgba(194, 196, 229, 0.055); box-shadow: 0 0 16px rgba(194, 196, 229, 0.06); } .issue-category-marker { border-color: var(--ops-line); color: var(--ops-primary-2); } .issue-detail-modal { background: #201f21; } .issue-modal-backdrop { background: rgba(5, 5, 7, 0.76); backdrop-filter: blur(6px); } .invite-flow-route { border-color: var(--ops-line); background: var(--ops-bg-2); } .invite-flow-route li.is-active, .invite-flow-route li.is-complete { color: var(--ops-primary-2); } .invite-flow-step.is-active { border-color: rgba(194, 196, 229, 0.55) !important; box-shadow: 0 0 18px rgba(194, 196, 229, 0.06); } .invite-delivery-grid > button, .invite-policy-note, .invite-delivery-summary, .invite-created-card, .admin-list-item { border-color: var(--ops-line) !important; background: var(--ops-panel-2) !important; } /* Configuration master: each concern is its own service/operational region */ .admin-shell { width: 100%; max-width: none; grid-template-columns: 280px minmax(0, 1fr); gap: 0; align-items: stretch; } .admin-shell.admin-shell--with-rail { grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 0; } .admin-shell-nav { position: sticky; top: 64px; align-self: start; height: calc(100vh - 64px); } .admin-sidebar { height: 100%; padding: 24px 16px; overflow-y: auto; border: 0; border-right: 1px solid var(--ops-line); border-radius: 0; background: #201f21; } .admin-sidebar-identity { display: grid; gap: 4px; } .admin-sidebar-identity strong { color: var(--ops-primary-2); font-family: "DM Sans", sans-serif; font-size: 1.35rem; } .admin-sidebar-identity span { color: var(--ops-muted); font-family: "JetBrains Mono", monospace; font-size: 0.65rem; } .admin-sidebar-identity i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--ops-green); } .admin-new-request { margin: 12px 0 4px; } .admin-nav-title { color: var(--ops-faint); font-size: 0.62rem; letter-spacing: 0.08em !important; } .admin-nav-links a { min-height: 34px; padding: 7px 10px; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; } .admin-nav-links a:hover, .admin-nav-links a.is-active { border-color: transparent; background: #454652; color: #e5e1e4; } .admin-card { padding: 32px 40px 60px; } .admin-header { align-items: end; } .admin-header h1 { color: var(--ops-primary-2); font-size: 2rem; } .admin-shell-rail { top: 80px; align-self: start; padding: 24px 20px 24px 0; } .service-status-panel { border-color: var(--ops-line) !important; background: var(--ops-panel-3) !important; } .service-status-grid > div, .config-subsection-nav, .config-subsection { border-color: var(--ops-line) !important; background: var(--ops-panel) !important; } .config-subsection-nav { position: sticky; top: 72px; z-index: 8; backdrop-filter: blur(12px); } .config-subsection-nav a { border-color: var(--ops-line); background: var(--ops-panel-2); } .config-subsection-nav a small { color: var(--ops-primary-2); } .config-subsection { padding: 24px !important; border-radius: 12px !important; } .config-subsection .section-header { padding-bottom: 14px; border-bottom: 1px solid var(--ops-line); } .config-subsection .section-header h2 { font-size: 1.2rem; } .admin-form .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .admin-form .admin-grid > label { min-height: 142px; padding: 16px; border-color: var(--ops-line-soft); background: var(--ops-panel-2); } .admin-form .admin-grid > label.field-span-full { grid-column: 1 / -1; } .admin-form .label-row > span:first-child { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; } .admin-form .admin-grid label[data-helper]::after { color: var(--ops-muted); font-family: Inter, sans-serif; } .settings-section-actions { margin-top: 4px; padding-top: 18px; } @media (max-width: 1250px) { .header { grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); } .header-actions a { padding-inline: 8px; font-size: 0.7rem; } .workspace-sidebar { width: 240px; } .page:has(.workspace-sidebar) > main, .page:has(.workspace-sidebar) > .user-view-banner, .page:has(.workspace-sidebar) > .site-banner { margin-left: 264px; } .request-stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-shell, .admin-shell.admin-shell--with-rail { grid-template-columns: 240px minmax(0, 1fr); } .admin-shell-rail { display: none; } } @media (max-width: 980px) { .header { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 16px; } .header-left { grid-column: 1; } .header-right { grid-column: 2; } .header-nav { display: none; } .workspace-sidebar { display: none; } .workspace-mobile-nav { position: fixed; inset: auto 0 0; z-index: 1000; display: flex; min-height: 70px; align-items: center; justify-content: space-around; padding: 7px 10px max(7px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ops-line); border-radius: 12px 12px 0 0; background: #353437; } .workspace-mobile-nav a { display: grid; min-width: 58px; justify-items: center; gap: 3px; padding: 7px 8px; border-radius: 999px; color: var(--ops-muted); font-family: "JetBrains Mono", monospace; font-size: 0.58rem; text-decoration: none; } .workspace-mobile-nav a.is-active { background: var(--ops-primary); color: var(--ops-primary-2); } .workspace-mobile-nav svg { width: 22px; height: 22px; } .page:has(.workspace-sidebar) > main, .page:has(.workspace-sidebar) > .user-view-banner, .page:has(.workspace-sidebar) > .site-banner { width: auto; margin-right: 14px; margin-left: 14px; } .page:has(.workspace-sidebar) > main { padding-top: 18px; padding-bottom: 28px; } .home-command { grid-template-columns: 1fr; } .home-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-shell, .admin-shell.admin-shell--with-rail { display: block; } .admin-shell-nav { position: static; height: auto; } .admin-sidebar { height: auto; border-right: 0; border-bottom: 1px solid var(--ops-line); } .admin-sidebar-identity, .admin-new-request { display: none; } .admin-nav-group { min-width: 200px; } .admin-sidebar { display: flex; overflow-x: auto; } .admin-card { padding: 24px 18px 90px; } } @media (max-width: 680px) { .page { padding-bottom: 78px; } .header { height: 58px; grid-template-rows: 58px; } .page { padding-top: 58px; } .brand-logo--header { width: 28px; height: 28px; } .brand { font-size: 1.35rem; } .beta-chip { display: none; } .user-view-toggle { max-width: 96px; overflow: hidden; padding-inline: 7px; font-size: 0.56rem; white-space: nowrap; } .home-command { gap: 16px; } .home-command-copy h1 { font-size: 1.75rem; } .home-search-row { grid-template-columns: 1fr auto; } .home-search-row button { padding-inline: 12px; } .home-section-heading { align-items: flex-start; } .home-recent-grid { grid-template-columns: 1fr; } .home-recent-grid .recent-card { grid-template-columns: 78px minmax(0, 1fr); grid-template-rows: auto; min-height: 128px; } .home-recent-grid .recent-open-cue { display: none; } .request-filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .request-filter-chips button { flex: 0 0 auto; } .request-master-stepper li strong { font-size: 0.58rem; } .request-master-stepper li > span { width: 27px; height: 27px; } .request-stage-grid { grid-template-columns: 1fr; } .request-stage { min-height: 0; } .admin-form .admin-grid { grid-template-columns: 1fr; } .admin-form .admin-grid > label.field-span-full { grid-column: auto; } .config-subsection { padding: 18px !important; } .config-subsection-nav { top: 62px; } } /* Guided issue reporting */ .issue-portal-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); align-items: start; gap: 20px; } .issue-portal-page > .issue-portal-hero, .issue-portal-page > .error-banner, .issue-portal-page > .status-banner { grid-column: 1 / -1; } .issue-portal-page > .issue-flow { grid-column: 1; } .issue-portal-page > .issue-reports-column { grid-column: 2; } .portal-lower-content { display: contents; } .issue-reports-column { position: sticky; top: 16px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; min-width: 0; height: calc(100vh - 32px); overflow: hidden; } .issue-reports-column.has-open-modal { z-index: 2000; } .issue-reports-column > .issue-history-heading { align-items: center; padding: 14px 15px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.018); } .issue-reports-column > .issue-history-heading h2 { font-size: 1rem; } .issue-reports-column > .portal-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; } .issue-reports-column > .portal-toolbar .portal-mine-toggle { align-self: end; margin: 0 0 10px; white-space: nowrap; } .issue-reports-column > .portal-workspace { display: block; min-width: 0; min-height: 0; } .issue-portal-page .portal-list-panel { height: 100%; max-height: none; padding: 13px; overflow: hidden; } .issue-portal-page .portal-list-panel > .user-directory-panel-header { display: none; } .issue-portal-page .portal-item-list { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; max-height: 100%; padding-right: 4px; } .issue-portal-page .portal-item-row { display: block; flex: 0 0 auto; width: 100%; height: auto; min-height: min-content; max-height: none; padding: 14px; white-space: normal; text-align: left; line-height: 1.45; } .issue-portal-page .portal-item-row-main { display: flex; flex-direction: column; min-width: 0; } .issue-portal-page .portal-item-row-title strong { flex-basis: 100%; min-width: 0; font-size: 0.95rem; line-height: 1.4; overflow-wrap: anywhere; } .issue-portal-page .portal-item-row-meta { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ops-line-soft); line-height: 1.5; overflow-wrap: anywhere; } .issue-portal-page .portal-item-row-meta > span:last-child { flex-basis: 100%; } .issue-portal-page .portal-item-row p { display: -webkit-box; margin: 6px 0; overflow: hidden; font-size: 0.7rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .issue-portal-page .portal-item-row-meta { gap: 5px 9px; font-size: 0.62rem; } .issue-card-progress { display: grid; gap: 6px; margin: 8px 0; } .issue-card-progress > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .issue-card-progress strong { color: var(--ops-cyan); font-size: 0.68rem; } .issue-card-progress small { color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.58rem; white-space: nowrap; } .issue-card-progress > i { display: block; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(126, 215, 255, 0.12); } .issue-card-progress > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ops-cyan), var(--request-green)); } .issue-card-progress.is-attention strong { color: var(--request-amber); } .issue-card-progress.is-attention > i > b { background: var(--request-amber); } .issue-card-progress.is-complete strong { color: var(--request-green); } .issue-modal-backdrop { position: fixed; z-index: 998; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(2, 6, 18, 0.76); backdrop-filter: blur(5px); cursor: default; } .issue-detail-modal { display: none; } .issue-detail-modal.is-open { position: fixed; z-index: 999; inset: 5vh max(18px, calc((100vw - 1120px) / 2)); display: grid; align-content: start; max-height: 90vh; padding: 0 20px 22px; overflow: auto; border-color: rgba(126, 215, 255, 0.36); background: var(--ops-panel); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55); } .issue-modal-toolbar { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 -20px 4px; padding: 14px 20px; border-bottom: 1px solid var(--ops-line); background: rgba(13, 21, 39, 0.97); backdrop-filter: blur(14px); } .issue-modal-toolbar > div { display: grid; gap: 2px; } .issue-modal-toolbar > .issue-modal-toolbar-actions { display: flex; grid-auto-flow: column; gap: 8px; } .issue-delete-confirmation { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px; border: 1px solid rgba(255, 86, 113, 0.42); border-radius: var(--ops-radius-lg); background: linear-gradient(120deg, rgba(255, 86, 113, 0.11), rgba(255, 86, 113, 0.035)); } .issue-delete-confirmation > div:first-child { display: grid; gap: 5px; } .issue-delete-confirmation > div:last-child { display: flex; flex: 0 0 auto; gap: 8px; } .issue-delete-confirmation h3, .issue-delete-confirmation p { margin: 0; } .issue-delete-confirmation p { max-width: 720px; color: var(--ops-muted); font-size: 0.74rem; line-height: 1.5; } .issue-pipeline-card { display: grid; gap: 16px; padding: 16px; border: 1px solid rgba(126, 215, 255, 0.3); border-radius: var(--ops-radius-lg); background: linear-gradient(120deg, rgba(14, 165, 233, 0.07), rgba(126, 215, 255, 0.025)); } .issue-pipeline-card.is-attention { border-color: rgba(255, 192, 84, 0.42); background: linear-gradient(120deg, rgba(255, 192, 84, 0.08), rgba(255, 192, 84, 0.025)); } .issue-pipeline-card.is-complete { border-color: rgba(72, 224, 178, 0.38); background: linear-gradient(120deg, rgba(72, 224, 178, 0.075), rgba(72, 224, 178, 0.025)); } .issue-pipeline-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .issue-pipeline-card > header > div { display: grid; gap: 4px; } .issue-pipeline-card h3, .issue-pipeline-card p { margin: 0; } .issue-pipeline-card p { color: var(--ops-muted); font-size: 0.75rem; line-height: 1.5; } .issue-pipeline-card > ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; } .issue-pipeline-card li { position: relative; display: grid; justify-items: center; gap: 7px; min-width: 0; color: var(--ops-muted); font-size: 0.62rem; text-align: center; } .issue-pipeline-card li::before { position: absolute; z-index: 0; top: 12px; right: 50%; left: -50%; height: 2px; background: var(--ops-line-soft); content: ""; } .issue-pipeline-card li:first-child::before { display: none; } .issue-pipeline-card li > i { position: relative; z-index: 1; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--ops-line); border-radius: 50%; background: var(--ops-panel); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.58rem; font-style: normal; } .issue-pipeline-card li.is-complete, .issue-pipeline-card li.is-active { color: var(--ops-text); } .issue-pipeline-card li.is-complete::before, .issue-pipeline-card li.is-active::before, .issue-pipeline-card li.is-attention::before { background: var(--ops-cyan); } .issue-pipeline-card li.is-complete > i { border-color: var(--request-green); color: #061813; background: var(--request-green); } .issue-pipeline-card li.is-active > i { border-color: var(--ops-cyan); color: var(--ops-cyan); box-shadow: 0 0 14px rgba(126, 215, 255, 0.28); } .issue-pipeline-card li.is-attention { color: var(--request-amber); } .issue-pipeline-card li.is-attention > i { border-color: var(--request-amber); color: var(--request-amber); box-shadow: 0 0 14px rgba(255, 192, 84, 0.25); } .issue-modal-toolbar strong { font-size: 0.86rem; } .issue-portal-page > .issue-portal-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 0; padding: 22px 24px; background: radial-gradient(circle at 100% 0%, rgba(126, 215, 255, 0.11), transparent 42%), linear-gradient(135deg, rgba(90, 80, 240, 0.12), transparent 48%), var(--ops-panel); } .issue-portal-hero > div:first-child { display: grid; gap: 5px; max-width: 790px; } .issue-portal-hero h1 { font-size: clamp(1.65rem, 3vw, 2.45rem); letter-spacing: -0.035em; } .issue-portal-hero .lede { max-width: 760px; margin: 0; } .issue-hero-count { display: grid; flex: 0 0 auto; min-width: 130px; padding: 12px 16px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.025); } .issue-hero-count strong { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 1.45rem; } .issue-hero-count span { color: var(--ops-muted); font-size: 0.7rem; text-transform: uppercase; } .issue-flow { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--ops-line); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.018); } .issue-flow-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 13px; } .issue-flow-heading > div { display: grid; gap: 4px; } .issue-flow-heading h2, .issue-resolution-card h2, .issue-history-heading h2, .media-status-heading h3 { margin: 0; } .issue-flow-heading p, .issue-resolution-card p, .media-status-check > p { margin: 0; color: var(--ops-muted); line-height: 1.5; } .issue-step-number { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(126, 215, 255, 0.34); border-radius: 50%; background: rgba(14, 165, 233, 0.08); color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.7rem; font-weight: 800; } .issue-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .issue-category-card { display: grid; align-content: start; gap: 8px; min-height: 190px; padding: 16px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.022); color: var(--ops-text); text-align: left; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .issue-category-card:hover { transform: translateY(-2px); border-color: rgba(126, 215, 255, 0.42); } .issue-category-card.is-selected { border-color: rgba(72, 224, 178, 0.58); background: linear-gradient(145deg, rgba(72, 224, 178, 0.09), rgba(14, 165, 233, 0.035)); box-shadow: 0 0 24px rgba(72, 224, 178, 0.06); } .issue-category-card strong { font-size: 0.98rem; } .issue-category-card p, .issue-category-card small { margin: 0; color: var(--ops-muted); font-size: 0.75rem; font-weight: 500; line-height: 1.45; } .issue-category-card small { align-self: end; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--ops-line-soft); color: var(--request-green); font-size: 0.68rem; } .issue-category-marker { justify-self: start; padding: 4px 7px; border: 1px solid rgba(126, 215, 255, 0.24); border-radius: 999px; color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.05em; } .issue-guided-form { display: grid; gap: 18px; padding-top: 20px; border-top: 1px solid var(--ops-line); } .issue-choice-field { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; } .issue-choice-field legend, .issue-question-grid label > span { margin-bottom: 7px; color: var(--ops-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .issue-choice-row { display: flex; flex-wrap: wrap; gap: 8px; } .issue-choice-row button { border-color: var(--ops-line-soft); background: rgba(255, 255, 255, 0.025); color: var(--ops-muted); } .issue-choice-row button.is-selected { border-color: rgba(126, 215, 255, 0.48); background: rgba(14, 165, 233, 0.12); color: var(--ops-text); } .issue-question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .issue-question-grid label { display: grid; align-content: start; } .issue-field-span-2 { grid-column: span 2; } .issue-media-finder { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.018); } .issue-media-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .issue-media-search-row button { min-width: 120px; } .issue-media-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(98px, auto); align-content: start; gap: 8px; max-height: 410px; overflow: auto; padding-right: 2px; } .issue-media-result { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; min-height: 98px; padding: 8px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.022); color: var(--ops-text); text-align: left; } .issue-media-result:hover { border-color: rgba(126, 215, 255, 0.42); background: rgba(14, 165, 233, 0.07); } .issue-media-result > span:last-child { display: grid; gap: 3px; min-width: 0; opacity: 1; font-size: inherit; text-align: left; text-transform: none; } .issue-media-result > span:last-child strong, .issue-media-result > span:last-child small, .issue-media-result > span:last-child b { overflow-wrap: anywhere; text-align: left; text-transform: none; } .issue-media-result small, .issue-media-result b, .issue-selected-media small { color: var(--ops-muted); font-size: 0.64rem; font-weight: 600; } .issue-media-result b { color: var(--request-green); } .issue-confirmation-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px; border: 1px solid rgba(126, 215, 255, 0.34); border-radius: var(--ops-radius-lg); background: linear-gradient(120deg, rgba(14, 165, 233, 0.1), rgba(79, 70, 229, 0.07)); } .issue-confirmation-card > div:first-child { display: grid; gap: 6px; } .issue-confirmation-card h3, .issue-confirmation-card p { margin: 0; } .issue-confirmation-card p, .issue-confirmation-card small { color: var(--ops-muted); line-height: 1.5; } .issue-confirmation-actions { display: flex; flex: 0 0 auto; gap: 8px; } .issue-activity-block { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius-lg); background: rgba(255, 255, 255, 0.018); } .issue-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .issue-activity-heading h3 { margin: 0; } .issue-activity-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .issue-activity-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--ops-line-soft); } .issue-activity-list li:first-child { border-top: 0; } .issue-activity-list i { width: 9px; height: 9px; margin-top: 4px; border: 2px solid rgba(126, 215, 255, 0.52); border-radius: 50%; background: rgba(14, 165, 233, 0.18); } .issue-activity-list li > div { display: grid; gap: 3px; min-width: 0; } .issue-activity-list strong { color: var(--ops-text); font-size: 0.78rem; line-height: 1.45; } .issue-activity-list span, .issue-activity-list time { color: var(--ops-muted); font-size: 0.67rem; } .issue-activity-list time { white-space: nowrap; } @media (max-width: 640px) { .issue-confirmation-card { align-items: stretch; flex-direction: column; } .issue-confirmation-actions { display: grid; } .issue-confirmation-actions button { width: 100%; } .issue-activity-list li { grid-template-columns: 12px minmax(0, 1fr); } .issue-activity-list time { grid-column: 2; white-space: normal; } } .issue-media-poster { display: grid; place-items: center; width: 54px; height: 80px; overflow: hidden; border: 1px solid var(--ops-line-soft); border-radius: calc(var(--ops-radius) - 2px); background: rgba(255, 255, 255, 0.025); } .issue-media-poster img { width: 100%; height: 100%; object-fit: cover; } .issue-media-poster i { color: var(--ops-muted); font-size: 0.58rem; font-style: normal; text-align: center; } .issue-selected-media { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px; border: 1px solid rgba(72, 224, 178, 0.34); border-radius: var(--ops-radius); background: rgba(72, 224, 178, 0.055); } .issue-selected-media > div { display: grid; gap: 3px; } .issue-target-picker, .issue-tv-targets { display: grid; gap: 12px; } .issue-target-picker { padding-top: 2px; } .issue-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .issue-choice-grid button, .issue-season-grid button, .issue-episode-grid button, .issue-movie-target { min-width: 0; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.022); color: var(--ops-text); text-align: left; } .issue-choice-grid button { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 10px 12px; } .issue-choice-grid button > span { display: grid; flex: 0 0 auto; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(126, 215, 255, 0.3); border-radius: 50%; color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; } .issue-choice-grid button strong, .issue-season-grid button strong, .issue-episode-grid button strong, .issue-movie-target strong { overflow-wrap: anywhere; font-size: 0.76rem; line-height: 1.35; text-transform: none; } .issue-choice-grid button.is-selected, .issue-season-grid button.is-selected, .issue-episode-grid button.is-selected, .issue-movie-target.is-selected { border-color: rgba(72, 224, 178, 0.55); background: rgba(72, 224, 178, 0.08); box-shadow: 0 0 20px rgba(72, 224, 178, 0.06); } .issue-movie-target { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px; } .issue-movie-target > span { flex: 0 0 auto; color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.65rem; } .issue-movie-target > div, .issue-season-grid button, .issue-episode-grid button { display: grid; gap: 4px; } .issue-movie-target small, .issue-season-grid button small, .issue-episode-grid button small { color: var(--ops-muted); font-size: 0.64rem; font-weight: 600; line-height: 1.4; text-transform: none; } .issue-movie-target:disabled, .issue-episode-grid button:disabled { cursor: not-allowed; opacity: 0.48; } .issue-target-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-top: 2px; } .issue-target-heading strong { font-size: 0.78rem; } .issue-target-heading small { color: var(--ops-muted); font-size: 0.66rem; } .issue-season-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .issue-season-grid button { position: relative; padding: 11px; } .issue-season-grid button b, .issue-episode-grid button b { justify-self: start; padding: 3px 6px; border-radius: 999px; background: rgba(72, 224, 178, 0.13); color: var(--request-green); font-size: 0.56rem; line-height: 1.2; text-transform: uppercase; } .issue-season-tabs { padding-top: 4px; border-top: 1px solid var(--ops-line-soft); } .issue-episode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 390px; overflow: auto; padding-right: 2px; } .issue-episode-grid button { align-content: start; min-height: 91px; padding: 11px; } .issue-episode-grid button > span { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.62rem; } .issue-file-picker { display: grid; gap: 11px; padding: 14px; border: 1px solid rgba(126, 215, 255, 0.25); border-radius: var(--ops-radius); background: rgba(14, 165, 233, 0.035); } .issue-file-picker > div:first-child { display: grid; gap: 3px; } .issue-file-picker h3, .issue-file-picker p { margin: 0; } .issue-file-picker p { color: var(--ops-muted); font-size: 0.72rem; } .issue-file-list { display: grid; gap: 7px; max-height: 340px; overflow: auto; padding-right: 2px; } .issue-file-list > label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.022); cursor: pointer; } .issue-file-list > label.is-selected { border-color: rgba(72, 224, 178, 0.45); background: rgba(72, 224, 178, 0.055); } .issue-file-list > label > span { display: grid; gap: 2px; min-width: 0; } .issue-file-list strong, .issue-file-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .issue-file-list small, .issue-file-list b { color: var(--ops-muted); font-size: 0.65rem; font-weight: 600; } .issue-replacement-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px; padding: 13px; border: 1px solid rgba(255, 192, 84, 0.36); border-radius: var(--ops-radius); background: rgba(255, 192, 84, 0.055); cursor: pointer; } .issue-replacement-toggle > span { display: grid; gap: 3px; } .issue-replacement-toggle small { color: var(--ops-muted); font-size: 0.69rem; line-height: 1.45; } .media-status-check { display: grid; gap: 13px; padding: 16px; border: 1px solid rgba(126, 215, 255, 0.28); border-radius: var(--ops-radius-lg); background: rgba(14, 165, 233, 0.045); } .media-status-check.media-status-up { border-color: rgba(72, 224, 178, 0.34); background: rgba(72, 224, 178, 0.045); } .media-status-check.media-status-degraded { border-color: rgba(255, 192, 84, 0.36); background: rgba(255, 192, 84, 0.05); } .media-status-check.media-status-down { border-color: rgba(255, 86, 113, 0.38); background: rgba(255, 86, 113, 0.05); } .media-status-heading, .issue-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .media-status-heading > div, .issue-history-heading > div { display: grid; gap: 4px; } .issue-live-scan { display: flex; align-items: center; gap: 9px; color: var(--ops-muted); font-size: 0.75rem; } .issue-live-scan i { width: 9px; height: 9px; border-radius: 50%; background: var(--ops-cyan); box-shadow: 0 0 14px var(--ops-cyan); animation: request-operation-pulse 1.15s ease-in-out infinite; } .media-status-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .media-status-metrics > div { display: grid; gap: 3px; min-width: 0; padding: 10px; border: 1px solid var(--ops-line-soft); border-radius: var(--ops-radius); background: rgba(255, 255, 255, 0.022); } .media-status-metrics span { color: var(--ops-muted); font-size: 0.62rem; text-transform: uppercase; } .media-status-metrics strong { overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; } .issue-resolution-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid rgba(72, 224, 178, 0.3); border-radius: var(--ops-radius-lg); background: linear-gradient(110deg, rgba(72, 224, 178, 0.07), rgba(14, 165, 233, 0.035)); } .issue-resolution-card > div { display: grid; gap: 4px; } .issue-resolution-card > button { min-width: 150px; } .issue-history-heading { padding-top: 4px; } .issue-history-heading > span { padding: 5px 9px; border: 1px solid var(--ops-line-soft); border-radius: 999px; color: var(--ops-muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.65rem; } .issue-linked-request { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid rgba(126, 215, 255, 0.28); border-radius: var(--ops-radius); background: rgba(14, 165, 233, 0.045); } .issue-linked-request > div { display: grid; gap: 3px; } .issue-portal-page .portal-item-row p { display: -webkit-box; overflow: hidden; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @media (max-width: 1100px) { .issue-portal-page { grid-template-columns: minmax(0, 1fr); } .issue-portal-page > .issue-portal-hero, .issue-portal-page > .error-banner, .issue-portal-page > .status-banner, .issue-portal-page > .issue-flow, .issue-portal-page > .issue-reports-column { grid-column: 1; grid-row: auto; } .issue-reports-column { position: static; height: auto; overflow: visible; } .issue-portal-page .portal-list-panel { position: static; max-height: none; } .issue-portal-page .portal-item-list { max-height: 440px; } } @media (max-width: 980px) { .issue-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .issue-choice-grid, .issue-episode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .issue-season-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .media-status-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .issue-portal-page > .issue-portal-hero, .media-status-heading, .issue-history-heading { align-items: flex-start; flex-direction: column; } .issue-hero-count { width: 100%; } .issue-flow { padding: 14px; } .issue-category-grid, .issue-choice-grid, .issue-season-grid, .issue-episode-grid, .issue-question-grid, .issue-media-results, .media-status-metrics { grid-template-columns: 1fr; } .issue-field-span-2 { grid-column: span 1; } .issue-category-card { min-height: 0; } .issue-resolution-card { grid-template-columns: auto minmax(0, 1fr); } .issue-resolution-card > button { grid-column: 1 / -1; width: 100%; } .issue-media-search-row { grid-template-columns: 1fr; } .issue-selected-media { align-items: stretch; flex-direction: column; } .issue-target-heading { align-items: flex-start; flex-direction: column; } .issue-linked-request { align-items: stretch; flex-direction: column; } .issue-file-list > label { grid-template-columns: auto minmax(0, 1fr); } .issue-file-list > label > b { grid-column: 2; } .issue-detail-modal.is-open { inset: 10px; max-height: calc(100vh - 20px); padding-right: 13px; padding-left: 13px; } .issue-modal-toolbar { margin-right: -13px; margin-left: -13px; padding-right: 13px; padding-left: 13px; } .issue-modal-toolbar > .issue-modal-toolbar-actions { display: flex; } .issue-delete-confirmation { align-items: stretch; flex-direction: column; } .issue-delete-confirmation > div:last-child { display: grid; } .issue-delete-confirmation button { width: 100%; } .issue-pipeline-card > header { flex-direction: column; } .issue-pipeline-card > ol { grid-template-columns: 1fr; gap: 8px; } .issue-pipeline-card li { grid-template-columns: 25px minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; } .issue-pipeline-card li::before { top: -9px; right: auto; left: 12px; width: 2px; height: 10px; } } /* Final screen-specific alignment: these rules intentionally follow the legacy Issues styles so the Stitch tokens remain authoritative. */ .issue-flow, .issue-reports-column, .issue-detail-modal.is-open, .issue-pipeline-card, .issue-resolution-card, .issue-media-search, .media-status-card { border-color: var(--ops-line) !important; background: var(--ops-panel) !important; } .issue-category-card, .issue-choice-card, .issue-season-card, .issue-episode-card { border-color: var(--ops-line-soft); background: var(--ops-panel-2); } .issue-category-card:hover, .issue-choice-card:hover, .issue-season-card:hover, .issue-episode-card:hover { border-color: rgba(194, 196, 229, 0.48); } .issue-category-card.is-selected, .issue-choice-card.is-selected, .issue-season-card.is-selected, .issue-episode-card.is-selected { border-color: rgba(194, 196, 229, 0.7); background: rgba(194, 196, 229, 0.07); box-shadow: 0 0 18px rgba(194, 196, 229, 0.06); } .issue-detail-modal.is-open { top: max(80px, 5vh); bottom: 4vh; max-height: calc(96vh - 80px); } @media (max-width: 640px) { .issue-detail-modal.is-open { inset: 74px 10px 10px; max-height: calc(100vh - 84px); } } /* Release picker control: independent of the user-management page stylesheet. */ .request-release-profile-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 14px 16px; border: 1px solid var(--ops-border, #393941); border-radius: 8px; background: rgba(255, 255, 255, 0.025); cursor: pointer; } .request-release-profile-toggle > span { display: grid; gap: 5px; min-width: 0; } .request-release-profile-toggle strong { font-size: 0.85rem; line-height: 1.4; } .request-release-profile-toggle small { color: var(--ops-muted); font-size: 0.75rem; line-height: 1.5; } .request-release-profile-toggle input[type="checkbox"] { appearance: none; position: relative; display: block; width: 38px; min-width: 38px; height: 22px; min-height: 22px; margin: 0; padding: 0; border: 1px solid #62616d !important; border-radius: 999px !important; background: #45444e !important; box-shadow: none; cursor: pointer; transition: background 0.15s; } .request-release-profile-toggle input[type="checkbox"]::before { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: #eeedf5; transition: transform 0.15s; } .request-release-profile-toggle input[type="checkbox"]:checked { background: #c7bdff !important; border-color: #c7bdff !important; } .request-release-profile-toggle input[type="checkbox"]:checked::before { transform: translateX(16px); background: #181529; } .request-release-profile-toggle input[type="checkbox"]:focus-visible { outline: 2px solid #c7bdff; outline-offset: 4px; } .request-release-profile-toggle input[type="checkbox"]:disabled { cursor: wait; opacity: 0.5; } /* Title artwork creates a cinematic opening while the pipeline stays readable. */ .request-detail-page.request-cinematic { position: relative; isolation: isolate; background: transparent !important; } .request-cinematic-art { position: absolute; z-index: -1; pointer-events: none; inset: -24px -24px auto; height: 850px; overflow: hidden; border-radius: 20px 20px 0 0; background: radial-gradient(ellipse at 75% 10%, #31334a, #121214 65%); } .request-cinematic-art img { object-fit: cover; object-position: center top; } .request-cinematic-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,16,.88), rgba(10,11,16,.18) 75%), linear-gradient(180deg, rgba(12,13,18,.1), rgba(18,18,20,.5) 38%, #121214 88%); } .request-cinematic-title { min-height: 300px; display: flex; align-items: flex-end; padding: 28px 12px 16px; } .request-cinematic-title .page-heading { width: 100%; border: 0; background: transparent; margin: 0; } .request-cinematic-title .page-heading h1 { font-size: clamp(2rem, 4.5vw, 3.7rem); line-height: 1.08; max-width: 900px; text-wrap: balance; text-shadow: 0 2px 22px #0009; } .request-cinematic-title .page-heading p { color: #e3e3ec; text-shadow: 0 1px 8px #000; } .request-cinematic-title .request-poster { width: 100px; height: 150px; border-radius: 8px; box-shadow: 0 12px 36px #0008; } .request-cinematic:not(.has-backdrop) .request-cinematic-title { min-height: 180px; } @media (max-width: 640px) { .request-cinematic-art { inset: -12px -12px auto; height: 650px; } .request-cinematic-title { min-height: 240px; padding: 16px 0 8px; } .request-cinematic-title .request-poster { width: 68px; height: 102px; } .request-cinematic-title .page-heading h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); } }