.admin-body { min-width: 20rem; color: #1c1c1a; background: #f3f4f3; } .admin-body h1, .admin-body h2, .admin-body h3, .admin-body p { margin-top: 0; } .admin-shell { display: grid; min-height: calc(100dvh - 2rem); grid-template-columns: 15.5rem minmax(0, 1fr); } .admin-sidebar { position: sticky; z-index: 60; top: 0; display: flex; height: 100dvh; flex-direction: column; color: rgba(255, 255, 255, 0.68); background: #141413; border-right: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-brand-shell { display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-brand-shell > a { display: flex; min-width: 0; align-items: center; gap: 0.7rem; text-decoration: none; } .sidebar-mark { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; color: #121210; background: var(--gold-light); border-radius: 50%; font-size: 0.58rem; font-weight: 850; letter-spacing: 0.08em; } .sidebar-brand-shell strong, .sidebar-brand-shell small { display: block; } .sidebar-brand { color: #fff; font-size: 0.82rem; } .sidebar-brand-shell small { color: rgba(255, 255, 255, 0.62); font-size: 0.6rem; } .sidebar-close { display: none; width: 2.75rem; height: 2.75rem; place-items: center; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; font-size: 1.2rem; } .sidebar-nav { flex: 1; padding: 0.85rem 0.75rem; overflow-y: auto; } .sidebar-nav > p { margin: 1.1rem 0.65rem 0.4rem; color: rgba(255, 255, 255, 0.58); font-size: 0.61rem; font-weight: 760; letter-spacing: 0.08em; } .sidebar-nav > p:first-child { margin-top: 0.25rem; } .sidebar-nav a { display: grid; min-height: 2.5rem; align-items: center; grid-template-columns: 1.4rem 1fr auto; gap: 0.55rem; padding: 0.55rem 0.65rem; color: rgba(255, 255, 255, 0.61); border-radius: 0.38rem; font-size: 0.72rem; font-weight: 650; text-decoration: none; } .sidebar-nav a:hover, .sidebar-nav a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.06); } .sidebar-nav a.is-current { color: #fff; background: #2c2b27; box-shadow: inset 2px 0 0 var(--gold-light); } .sidebar-nav a > span { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; text-align: center; } .sidebar-nav a small { min-width: 1.3rem; padding: 0.12rem 0.35rem; color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.08); border-radius: 999px; font-size: 0.58rem; text-align: center; } .sidebar-nav a .nav-alert { color: #e7b7ae; background: rgba(157, 63, 52, 0.28); } .sidebar-foot { margin: 0.75rem; padding: 0.85rem; background: #1d1d1b; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; } .sidebar-foot p { margin: 0.65rem 0; color: rgba(255, 255, 255, 0.48); font-size: 0.64rem; line-height: 1.55; } .sidebar-foot a { color: #fff; font-size: 0.67rem; font-weight: 700; } .admin-main { min-width: 0; } .admin-topbar { position: sticky; z-index: 50; top: 0; display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.25rem; background: rgba(248, 249, 248, 0.95); border-bottom: 1px solid #dedfdd; backdrop-filter: blur(14px); } .mobile-sidebar-button { display: none; min-width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; color: inherit; background: #fff; border: 1px solid #dadbd8; border-radius: 0.38rem; } .breadcrumb { display: flex; align-items: center; gap: 0.45rem; color: #858781; font-size: 0.72rem; } .breadcrumb strong { color: #20211f; } .topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .icon-button, .account-button { min-height: 2.75rem; color: #454640; background: #fff; border: 1px solid #dadbd8; border-radius: 0.4rem; } .icon-button { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.6rem; } .topbar-actions .icon-button { min-width: 2.75rem; justify-content: center; } .icon-button kbd { padding: 0.1rem 0.3rem; color: #858781; background: #f1f2f0; border: 1px solid #e0e1df; border-radius: 0.2rem; font-family: var(--font-sans); font-size: 0.55rem; } .icon-button i { position: absolute; top: 0.42rem; right: 0.42rem; width: 0.38rem; height: 0.38rem; background: #b34a3c; border: 2px solid #fff; border-radius: 50%; } .account-button { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.58rem; text-align: left; } .account-button > span:first-child { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; color: #fff; background: #383a36; border-radius: 50%; font-size: 0.62rem; font-weight: 800; } .account-button strong, .account-button small { display: block; } .account-button strong { font-size: 0.65rem; } .account-button small { color: #858781; font-size: 0.55rem; } .admin-content { max-width: 115rem; margin: 0 auto; padding: 1.5rem; } .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 0.4rem 0 1.35rem; } .heading-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 0.7rem; color: #777973; font-size: 0.62rem; } .page-heading h1 { margin-bottom: 0.3rem; font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 720; letter-spacing: -0.055em; } .page-heading > div:first-child > p { margin: 0; color: #6d6f69; font-size: 0.76rem; } .heading-actions { display: flex; gap: 0.55rem; } .system-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; padding: 0.75rem 0.9rem; color: #6d4b0b; background: #fff7df; border: 1px solid #e7d49e; border-radius: 0.45rem; } .system-banner.is-error { color: #81352d; background: #fff0ed; border-color: #e6b5ae; } .system-banner.is-info { color: #2f577a; background: #edf5fb; border-color: #b9d2e6; } .system-banner strong { font-size: 0.75rem; } .system-banner p { margin: 0.15rem 0 0; font-size: 0.67rem; } .system-banner button { color: inherit; background: transparent; border: 0; font-size: 0.66rem; font-weight: 720; } .queue-toolbar { display: grid; grid-template-columns: minmax(15rem, 1fr) auto auto auto; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; padding: 0.7rem; background: #fff; border: 1px solid #dedfdd; border-radius: 0.5rem; } .search-field { display: flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0 0.75rem; color: #858781; background: #f7f8f7; border: 1px solid #dedfdd; border-radius: 0.35rem; } .search-field input { width: 100%; min-height: 2.75rem; min-width: 0; color: #222320; background: transparent; border: 0; outline: 0; font-size: 0.72rem; } .queue-toolbar select { min-height: 2.75rem; padding: 0.42rem 1.8rem 0.42rem 0.65rem; color: #454640; background: #fff; border: 1px solid #dadbd8; border-radius: 0.35rem; font-size: 0.68rem; font-weight: 650; } .state-simulator { display: flex; align-items: center; gap: 0.45rem; padding-left: 0.55rem; border-left: 1px solid #e1e2e0; color: #777973; font-size: 0.61rem; font-weight: 700; } .admin-workbench { display: grid; min-width: 0; grid-template-columns: minmax(35rem, 1fr) minmax(22rem, 26rem); gap: 0.75rem; align-items: start; } .admin-workbench.is-inspector-closed { grid-template-columns: minmax(0, 1fr); } .queue-panel, .inspector, .role-proof, .settings-proof { background: #fff; border: 1px solid #dedfdd; border-radius: 0.55rem; } .queue-panel { position: relative; min-width: 0; min-height: 39rem; overflow: hidden; } .panel-heading { display: flex; min-height: 3.4rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid #e4e5e3; } .panel-heading > div { display: flex; align-items: center; gap: 0.65rem; } .panel-heading h2 { margin: 0; font-size: 0.82rem; } .panel-heading > div:first-child > span { color: #858781; font-size: 0.62rem; } .queue-legend { display: inline-flex; align-items: center; gap: 0.3rem; color: #858781; font-size: 0.58rem; } .queue-legend i, .cell-status i { width: 0.42rem; height: 0.42rem; border-radius: 50%; } .legend-block, .cell-status.is-blocked i { background: #b34a3c; } .legend-warn, .cell-status.is-warn i, .cell-status.is-stale i { background: #b1832d; } .table-scroll { overflow: auto; scrollbar-width: thin; } .queue-table { width: 100%; min-width: 59rem; border-collapse: collapse; table-layout: fixed; } .queue-table th, .queue-table td { padding: 0.7rem 0.6rem; border-bottom: 1px solid #ecedea; font-size: 0.66rem; text-align: left; vertical-align: middle; } .queue-table th { position: sticky; z-index: 2; top: 0; color: #777973; background: #fafbfa; font-size: 0.58rem; font-weight: 730; } .queue-table th:first-child { width: 16.5rem; } .queue-table th:nth-child(2) { width: 5.2rem; } .queue-table th:nth-child(3) { width: 7.8rem; } .queue-table th:nth-child(4) { width: 7.2rem; } .queue-table th:nth-child(5), .queue-table th:nth-child(6) { width: 6.5rem; } .queue-table th:last-child { width: 5.6rem; } .queue-table tbody tr { transition: background-color var(--transition), box-shadow var(--transition); } .queue-table tbody tr:hover { background: #f8f9f8; } .queue-table tbody tr.is-selected { background: #f2f5f3; box-shadow: inset 3px 0 0 var(--gold-dark); } .queue-table tbody tr.is-hidden { display: none; } .queue-table td > span, .queue-table td > strong, .queue-table td > small { display: block; } .queue-table td > small, .queue-table td > span + small, .queue-table td > strong + small { margin-top: 0.13rem; color: #62665f; font-size: 0.57rem; } .row-title { display: flex; width: 100%; align-items: center; gap: 0.65rem; color: inherit; text-align: left; } .row-cell-select { position: relative; } .row-select-overlay { position: absolute; z-index: 2; inset: 0; width: 100%; padding: 0; background: transparent; border: 0; } .row-select-overlay:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; } .row-title > span:last-child { min-width: 0; } .row-title strong, .row-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-title strong { font-size: 0.68rem; } .row-title small { margin-top: 0.15rem; color: #898b85; font-size: 0.55rem; } .row-thumb { position: relative; display: block; width: 3.5rem; height: 2.35rem; flex: 0 0 auto; overflow: hidden; background: #d8dad6; border-radius: 0.25rem; } .row-thumb img { width: 100%; height: 100%; object-fit: cover; } .row-thumb-plan, .row-thumb-stale, .row-thumb-closed, .row-thumb-draft, .row-thumb-review { background: #d9ddd7; border: 1px solid #c7cbc5; } .row-thumb-plan i, .row-thumb-stale i, .row-thumb-closed i, .row-thumb-draft i, .row-thumb-review i { position: absolute; inset: 0.45rem; display: block; border: 1px solid #777d73; } .row-thumb-plan i::after, .row-thumb-stale i::after, .row-thumb-closed i::after, .row-thumb-draft i::after, .row-thumb-review i::after { position: absolute; top: -0.05rem; bottom: -0.05rem; left: 45%; border-left: 1px solid #777d73; content: ""; } .row-thumb-stale { background: #e8dfc9; } .row-thumb-closed { background: #dbdbd9; opacity: 0.65; } .row-thumb-draft { background: #e4e8ec; } .row-thumb-review { background: #e6d8d4; } .cell-status { display: inline-flex !important; align-items: center; gap: 0.35rem; width: max-content; font-weight: 700; } .cell-status.is-blocked { color: #963c31; } .cell-status.is-warn, .cell-status.is-stale { color: #805e1a; } .cell-status.is-pass { color: #286348; } .cell-status.is-pass i { background: #3d7c5d; } .cell-status.is-muted { color: #545650; } .cell-status.is-muted i { background: #a7aaa4; } .assignee { display: inline-flex !important; align-items: center; gap: 0.35rem; } .assignee i { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; color: #fff; background: #555852; border-radius: 50%; font-size: 0.52rem; font-style: normal; } .queue-loading, .queue-empty { position: absolute; z-index: 4; inset: 3.4rem 0 0; align-content: center; justify-items: center; padding: 2rem; background: rgba(255, 255, 255, 0.96); text-align: center; } .queue-loading:not([hidden]), .queue-empty:not([hidden]) { display: grid; } .queue-loading > span { display: block; width: min(90%, 36rem); height: 3.4rem; margin: 0.35rem 0; background: #eceeeb; border-radius: 0.35rem; animation: loading-pulse 1.2s ease-in-out infinite alternate; } .queue-loading > span:nth-child(2) { animation-delay: 120ms; } .queue-loading > span:nth-child(3) { animation-delay: 240ms; } .queue-loading p { margin: 1rem 0 0; color: #777973; font-size: 0.7rem; } @keyframes loading-pulse { from { opacity: 0.45; } to { opacity: 1; } } .queue-empty > span { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: 0.8rem; color: #858781; border: 1px solid #bfc1bd; border-radius: 50%; } .queue-empty strong { font-size: 0.85rem; } .queue-empty p { max-width: 25rem; margin: 0.35rem 0 1rem; color: #777973; font-size: 0.7rem; } .inspector { position: sticky; top: 5rem; display: flex; min-width: 0; max-height: calc(100dvh - 6rem); flex-direction: column; overflow: hidden; box-shadow: 0 0.55rem 1.75rem rgba(20, 20, 19, 0.08); } .inspector:not(.is-open) { display: none; } .inspector-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.9rem; border-bottom: 1px solid #e4e5e3; } .inspector-header > div { min-width: 0; } .inspector-header small { display: block; margin-top: 0.55rem; color: #858781; font-family: var(--font-mono); font-size: 0.55rem; } .inspector-header h2 { margin: 0.2rem 0 0; overflow: hidden; font-size: 1rem; letter-spacing: -0.035em; text-overflow: ellipsis; white-space: nowrap; } .inspector-close { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; color: #676963; background: #fff; border: 1px solid #dfe0dd; border-radius: 50%; font-size: 1.2rem; } .inspector-media { position: relative; height: 8.5rem; flex: 0 0 auto; overflow: hidden; background: #242522; } .inspector-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; } .inspector-media span { position: absolute; right: 0.55rem; bottom: 0.55rem; left: 0.55rem; padding: 0.3rem 0.45rem; color: #fff; background: rgba(18, 18, 16, 0.82); border-left: 2px solid var(--gold-light); font-size: 0.54rem; } .inspector-media.is-image-error::after, .media-provenance.is-image-error::after, .row-thumb.is-image-error::after { position: absolute; inset: 0; display: grid; place-items: center; padding: 0.5rem; color: #f8f7f3; background: #343531; content: attr(data-image-error); font-size: 0.55rem; text-align: center; } .media-provenance.is-image-error { position: relative; min-height: 7rem; } .channel-gates { display: grid; grid-template-columns: 1fr 1fr; padding: 0.65rem; gap: 0.5rem; background: #f8f9f8; border-bottom: 1px solid #e4e5e3; } .channel-gate { min-width: 0; padding: 0.55rem 0.6rem; background: #fff; border: 1px solid #dcdedb; border-radius: 0.4rem; text-align: left; } .channel-gate > span { display: flex; align-items: center; gap: 0.4rem; } .channel-gate i { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; border-radius: 50%; font-size: 0.56rem; font-style: normal; font-weight: 800; } .channel-gate strong { font-size: 0.64rem; } .channel-gate small { display: block; margin: 0.28rem 0 0 1.6rem; color: #858781; font-size: 0.53rem; } .channel-gate.is-pass i { color: #2e684d; background: #e5f0e9; } .channel-gate.is-blocked { border-color: #e4bcb7; } .channel-gate.is-blocked i { color: #9d3f34; background: #f6e8e5; } .inspector-tabs { display: flex; flex: 0 0 auto; padding: 0 0.55rem; overflow-x: auto; border-bottom: 1px solid #e2e3e1; scrollbar-width: thin; } .inspector-tabs button { position: relative; min-width: 2.75rem; min-height: 2.75rem; flex: 0 0 auto; padding: 0.65rem 0.55rem 0.55rem; color: #777973; background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 0.59rem; font-weight: 700; } .inspector-tabs button[aria-selected="true"] { color: #222320; border-bottom-color: #222320; } .inspector-tabs button span { display: inline-grid; min-width: 1rem; height: 1rem; place-items: center; margin-left: 0.15rem; color: #963c31; background: #f6e8e5; border-radius: 50%; font-size: 0.5rem; } .inspector-scroll { min-height: 0; flex: 1; overflow-y: auto; scrollbar-width: thin; } .tab-panel { padding: 0.9rem; } .panel-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.7rem; } .panel-section-heading:not(:first-child) { margin-top: 1.3rem; } .panel-section-heading span:not(.status-badge) { display: block; color: #898b85; font-size: 0.52rem; font-weight: 700; } .panel-section-heading h3 { margin: 0.15rem 0 0; font-size: 0.75rem; } .text-button { min-width: 2.75rem; min-height: 2.75rem; padding: 0.4rem; color: #6f5420; background: transparent; border: 0; font-size: 0.58rem; font-weight: 720; text-decoration: underline; text-underline-offset: 0.2rem; } .data-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid #dfe0dd; border-left: 1px solid #dfe0dd; } .data-grid > div { padding: 0.65rem; border-right: 1px solid #dfe0dd; border-bottom: 1px solid #dfe0dd; } .data-grid dt { color: #898b85; font-size: 0.52rem; } .data-grid dd { margin: 0.18rem 0 0; color: #252623; font-size: 0.64rem; font-weight: 700; } .inline-notice, .consent-note { display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.55rem; margin-top: 0.75rem; padding: 0.6rem; color: #5e5f5a; background: #f3f4f2; border: 1px solid #e1e2df; border-radius: 0.35rem; } .inline-notice > span, .consent-note > span { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; color: #64665f; border: 1px solid #979a93; border-radius: 50%; font-family: serif; font-size: 0.62rem; } .inline-notice p, .consent-note p { margin: 0; font-size: 0.58rem; } .inline-notice strong { display: block; margin-bottom: 0.1rem; color: #343531; } .state-path { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; } .state-path li { position: relative; min-width: 0; padding-top: 1.4rem; text-align: center; } .state-path li::before { position: absolute; top: 0.47rem; right: 50%; left: -50%; height: 1px; background: #d9dad7; content: ""; } .state-path li:first-child::before { display: none; } .state-path li > span { position: absolute; z-index: 1; top: 0; left: calc(50% - 0.48rem); width: 0.95rem; height: 0.95rem; background: #fff; border: 2px solid #c5c7c2; border-radius: 50%; } .state-path li.is-done > span, .state-path li.is-current > span { background: #426e56; border-color: #426e56; } .state-path li.is-current > span { box-shadow: 0 0 0 4px #e1eee7; } .state-path strong, .state-path small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .state-path strong { font-size: 0.55rem; } .state-path small { margin-top: 0.1rem; color: #898b85; font-size: 0.48rem; } .gate-detail { margin-bottom: 0.65rem; padding: 0.7rem; border: 1px solid #dfe0dd; border-radius: 0.4rem; } .gate-detail > header { display: flex; align-items: center; gap: 0.55rem; } .gate-detail > header > span { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; font-size: 0.64rem; font-weight: 800; } .gate-detail.is-pass > header > span { color: #2e684d; background: #e5f0e9; } .gate-detail.is-blocked { border-color: #e3b9b4; } .gate-detail.is-blocked > header > span { color: #9d3f34; background: #f6e8e5; } .gate-detail strong, .gate-detail small { display: block; } .gate-detail strong { font-size: 0.67rem; } .gate-detail small { color: #858781; font-size: 0.53rem; } .gate-detail ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0.65rem 0 0; padding: 0; color: #5f615b; list-style: none; font-size: 0.54rem; } .gate-detail ul li::before { margin-right: 0.3rem; color: #2e684d; content: "✓"; } .gate-detail > p { margin: 0.55rem 0; color: #6f4a44; font-size: 0.57rem; } .check-list { border-top: 1px solid #dfe0dd; } .check-row { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 0.55rem; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid #eceeeb; } .check-row > span { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 50%; font-size: 0.55rem; font-weight: 800; } .check-row.is-pass > span { color: #2e684d; background: #e5f0e9; } .check-row.is-blocked > span { color: #9d3f34; background: #f6e8e5; } .check-row.is-warn > span { color: #7f5d18; background: #f4ecd8; } .check-row strong, .check-row small { display: block; } .check-row strong { font-size: 0.59rem; } .check-row small { margin-top: 0.1rem; color: #858781; font-size: 0.51rem; } .check-row button { color: #6f5420; background: transparent; border: 0; font-size: 0.52rem; font-weight: 700; } .check-row:focus { outline: 3px solid var(--focus); outline-offset: 2px; } .document-list { border-top: 1px solid #dfe0dd; } .document-list article { display: grid; grid-template-columns: 1.8rem 1fr auto; gap: 0.55rem; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid #eceeeb; } .doc-icon { display: grid; width: 1.6rem; height: 1.8rem; place-items: center; color: #5f615b; background: #f1f2f0; border: 1px solid #d9dad7; border-radius: 0.2rem; font-size: 0.65rem; } .document-list article.is-missing .doc-icon { color: #9d3f34; background: #f6e8e5; border-color: #e3b9b4; } .document-list strong, .document-list small { display: block; } .document-list strong { font-size: 0.6rem; } .document-list small { margin-top: 0.1rem; color: #858781; font-size: 0.5rem; } .media-provenance { margin-top: 0.85rem; overflow: hidden; border: 1px solid #dfe0dd; border-radius: 0.4rem; } .media-provenance img { width: 100%; height: 7rem; object-fit: cover; } .media-provenance > div { padding: 0.65rem; } .media-provenance strong { display: block; margin-top: 0.5rem; font-size: 0.63rem; } .media-provenance p { margin: 0.2rem 0 0; color: #777973; font-size: 0.53rem; } .run-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 0.65rem; border-top: 1px solid #dfe0dd; border-left: 1px solid #dfe0dd; } .run-meta > div { padding: 0.55rem; border-right: 1px solid #dfe0dd; border-bottom: 1px solid #dfe0dd; } .run-meta dt { color: #898b85; font-size: 0.49rem; } .run-meta dd { margin: 0.15rem 0 0; font-size: 0.56rem; font-weight: 700; } .ai-summary { padding: 0.75rem; color: #f8f7f3; background: #20211f; border-radius: 0.4rem; } .ai-summary > span { color: #c6a15b; font-size: 0.51rem; font-weight: 700; } .ai-summary > strong { display: block; margin-top: 0.15rem; font-size: 1.15rem; } .ai-summary > div { display: flex; gap: 0.45rem; margin-top: 0.55rem; } .ai-summary small { padding: 0.22rem 0.35rem; color: rgba(248, 247, 243, 0.7); background: rgba(255, 255, 255, 0.07); border-radius: 0.2rem; font-size: 0.49rem; } .claim-review { margin-top: 0.75rem; } .claim-review article { margin-bottom: 0.5rem; padding: 0.65rem; background: #fafbfa; border: 1px solid #e1e2df; border-left-width: 3px; border-radius: 0.35rem; } .claim-review article.is-fact { border-left-color: #3d7c5d; } .claim-review article.is-unknown { border-left-color: #b1832d; } .claim-review article.is-edited { border-left-color: #9d3f34; } .claim-review header { display: flex; align-items: center; gap: 0.45rem; } .claim-review header > span { padding: 0.15rem 0.3rem; color: #555852; background: #e8eae7; border-radius: 0.18rem; font-size: 0.47rem; font-weight: 730; } .claim-review header strong { font-size: 0.58rem; } .claim-review p { margin: 0.35rem 0; color: #777973; font-size: 0.51rem; } .claim-review footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.4rem; border-top: 1px solid #e1e2df; } .claim-review footer span { color: #858781; font-size: 0.48rem; } .claim-review footer button { color: #6f5420; background: transparent; border: 0; font-size: 0.49rem; font-weight: 730; } .inspector-wide-action { width: 100%; margin-top: 0.4rem; } .appointment-card { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 0.65rem; align-items: center; padding: 0.65rem; border: 1px solid #dfe0dd; border-radius: 0.4rem; } .appointment-card time { display: grid; place-items: center; padding: 0.4rem; background: #f1f2f0; border-radius: 0.3rem; } .appointment-card time strong { font-size: 1rem; } .appointment-card time span { color: #858781; font-size: 0.46rem; } .appointment-card > div strong, .appointment-card > div p, .appointment-card > div small { display: block; } .appointment-card > div strong { font-size: 0.6rem; } .appointment-card > div p { margin: 0.12rem 0; color: #676963; font-size: 0.5rem; } .appointment-card > div small { color: #898b85; font-size: 0.47rem; } .appointment-card > button { color: #6f5420; background: transparent; border: 0; font-size: 0.49rem; font-weight: 700; } .audit-list { margin: 0; padding: 0; list-style: none; } .audit-list li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.55rem; } .audit-list li > div { padding: 0 0 0.75rem; border-left: 1px solid #dfe0dd; padding-left: 0.65rem; } .audit-dot { position: relative; z-index: 1; width: 0.55rem; height: 0.55rem; margin: 0.18rem 0 0 0.23rem; background: #5c7566; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #5c7566; } .audit-dot.is-blocked { background: #a5483d; box-shadow: 0 0 0 1px #a5483d; } .audit-dot.is-warn { background: #a47a2c; box-shadow: 0 0 0 1px #a47a2c; } .audit-list header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .audit-list header strong { font-size: 0.57rem; } .audit-list time { color: #898b85; font-size: 0.46rem; } .audit-list p { margin: 0.15rem 0; color: #676963; font-size: 0.51rem; } .audit-list small { color: #959791; font-size: 0.46rem; } .inspector-actions { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0.5rem; padding: 0.65rem; background: #fafbfa; border-top: 1px solid #dfe0dd; } .inspector-actions .button { min-width: 0; font-size: 0.65rem; } .role-proof, .settings-proof { margin-top: 0.75rem; padding: 1rem; } .role-proof > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 0.85rem; border-bottom: 1px solid #e1e2df; } .role-proof > header span { color: #858781; font-size: 0.58rem; font-weight: 700; } .role-proof h2, .settings-proof h2 { margin: 0.15rem 0 0; font-size: 0.9rem; } .role-proof > header p, .settings-proof p { max-width: 34rem; margin: 0; color: #777973; font-size: 0.65rem; } .role-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .role-grid article { padding: 0.85rem; border-right: 1px solid #e1e2df; } .role-grid article:last-child { border-right: 0; } .role-grid strong { font-size: 0.66rem; } .role-grid p { margin: 0.3rem 0; color: #61635d; font-size: 0.58rem; } .role-grid small { color: #963c31; font-size: 0.52rem; } .settings-proof { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; } .admin-dialog { width: min(35rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; color: #20211f; background: #fff; border: 0; border-radius: 0.6rem; box-shadow: 0 1.5rem 5rem rgba(20, 20, 19, 0.28); } .admin-dialog::backdrop { background: rgba(20, 20, 19, 0.62); backdrop-filter: blur(2px); } .admin-dialog-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid #e1e2df; } .admin-dialog-shell > header > div { display: flex; align-items: center; gap: 0.7rem; } .dialog-symbol { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; border-radius: 50%; font-weight: 800; } .dialog-symbol.is-blocked { color: #9d3f34; background: #f6e8e5; } .dialog-symbol.is-pass { color: #2e684d; background: #e5f0e9; } .admin-dialog-shell > header small { color: #858781; font-family: var(--font-mono); font-size: 0.53rem; } .admin-dialog-shell > header h2 { margin: 0.18rem 0 0; font-size: 0.95rem; } .admin-dialog-shell > header button { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; color: #676963; background: transparent; border: 1px solid #dfe0dd; border-radius: 50%; font-size: 1.2rem; } .admin-dialog-content { padding: 1rem; } .admin-dialog-content > p { color: #676963; font-size: 0.68rem; } .admin-dialog-content ol { margin: 0.75rem 0; padding: 0; border-top: 1px solid #e1e2df; list-style: none; } .admin-dialog-content li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid #eceeeb; font-size: 0.62rem; } .admin-dialog-content li span { color: #963c31; font-size: 0.57rem; font-weight: 700; } .admin-dialog-shell > footer { display: flex; justify-content: flex-end; padding: 0.75rem 1rem; background: #f7f8f7; border-top: 1px solid #e1e2df; } .admin-noscript { position: fixed; z-index: 200; right: 1rem; bottom: 1rem; max-width: 25rem; padding: 0.85rem; color: #fff; background: #20211f; border-left: 3px solid var(--gold-light); } .admin-noscript p { margin: 0.2rem 0 0; color: rgba(255, 255, 255, 0.65); font-size: 0.65rem; } @media (max-width: 92rem) { .admin-workbench { grid-template-columns: minmax(35rem, 1fr) 23rem; } .queue-table { min-width: 56rem; } } @media (max-width: 76rem) { .admin-workbench { grid-template-columns: 1fr; } .inspector { position: fixed; z-index: 120; top: 2rem; right: 0; bottom: 0; width: min(29rem, calc(100% - 1.5rem)); max-height: none; border-radius: 0.7rem 0 0 0; transform: translateX(105%); transition: transform var(--transition); } .inspector.is-open { display: flex; transform: translateX(0); } .inspector-backdrop:not([hidden]) { position: fixed; z-index: 110; inset: 2rem 0 0; display: block; background: rgba(20, 20, 19, 0.5); } .role-grid { grid-template-columns: 1fr 1fr; } .role-grid article:nth-child(2) { border-right: 0; } .role-grid article:nth-child(-n+2) { border-bottom: 1px solid #e1e2df; } } @media (max-width: 64rem) { .admin-shell { grid-template-columns: 13.5rem minmax(0, 1fr); } .queue-toolbar { grid-template-columns: minmax(13rem, 1fr) auto auto; } .state-simulator { grid-column: 1 / -1; justify-content: flex-end; padding: 0.55rem 0 0; border-top: 1px solid #e1e2df; border-left: 0; } } @media (max-width: 50rem) { .admin-shell { display: block; } .admin-sidebar { position: fixed; z-index: 150; top: 2rem; bottom: 0; left: 0; width: min(17rem, calc(100% - 2.5rem)); height: auto; pointer-events: none; transform: translateX(-105%); transition: transform var(--transition); visibility: hidden; } .admin-sidebar.is-open { pointer-events: auto; transform: translateX(0); visibility: visible; } .sidebar-close, .mobile-sidebar-button { display: grid; } .sidebar-backdrop:not([hidden]) { position: fixed; z-index: 140; inset: 2rem 0 0; display: block; background: rgba(20, 20, 19, 0.5); } .admin-topbar { padding: 0 0.8rem; } .breadcrumb { margin-right: auto; } .icon-button kbd, .account-button > span:last-child { display: none; } .admin-content { padding: 1rem 0.75rem; } .page-heading { align-items: stretch; flex-direction: column; } .heading-actions { display: grid; grid-template-columns: 1fr 1fr; } .queue-toolbar { grid-template-columns: 1fr 1fr; } .search-field { grid-column: 1 / -1; } .state-simulator { align-items: stretch; flex-direction: column; } .state-simulator select { width: 100%; } .role-proof > header, .settings-proof { align-items: flex-start; flex-direction: column; } } @media (max-width: 34rem) { .demo-strip { min-height: 2.3rem; padding-inline: 0.5rem; } .admin-sidebar, .inspector-backdrop:not([hidden]) { top: 2.3rem; } .topbar-actions .icon-button:first-child { display: none; } .heading-actions, .queue-toolbar, .role-grid, .data-grid, .run-meta { grid-template-columns: 1fr; } .queue-toolbar select { width: 100%; } .inspector { top: 2.3rem; width: 100%; border-radius: 0; } .channel-gates { grid-template-columns: 1fr; } .gate-detail ul { grid-template-columns: 1fr; } .appointment-card { grid-template-columns: 2.8rem 1fr; } .appointment-card > button { grid-column: 2; justify-self: start; } .role-grid article, .role-grid article:nth-child(2) { border-right: 0; border-bottom: 1px solid #e1e2df; } } /* 작은 운영 문구도 본문 대비 기준을 넘도록 중립색을 한 단계 진하게 쓴다. */ .admin-main small, .admin-main dt, .admin-main .breadcrumb, .admin-main .heading-badges, .admin-main .page-heading > div:first-child > p, .admin-main .panel-heading > div:first-child > span, .admin-main .queue-legend, .admin-main .search-field, .admin-main .queue-table th, .admin-main .inspector-tabs button, .admin-main .panel-section-heading span:not(.status-badge), .admin-main .gate-detail > p, .admin-main .inline-notice, .admin-main .consent-note, .admin-main .role-proof > header p, .admin-main .settings-proof p { color: #555751; } .admin-main .ai-summary small { color: rgba(248, 247, 243, 0.82); } .admin-main .state-simulator > span, .admin-main .icon-button kbd, .admin-main .role-proof > header span { color: #4f514b; }