/* Isolated workspace surfaces; navbar preferences reuse the shared site component. */
:root { --text: #e2e8f0; --muted: #94a3b8; --line: rgba(148,163,184,.18); --workspace-glass: transparent; }
.sidebar { display: none; }
.journal-sources { display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; max-width: 100%; box-sizing: border-box; margin: 0 0 22px; padding: 2px 16px 8px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline-end: 16px; }
.journal-sources button { flex: 0 0 auto; white-space: nowrap; }
.journal-sources button span { flex-shrink: 0; white-space: nowrap; }
.journal-meta > span { white-space: nowrap; }
.journal-sources button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid rgba(148,163,184,.2); border-radius: 11px; background: rgba(24,31,38,.65); color: #94a3b8; font: inherit; font-size: 12px; cursor: pointer; }
.journal-sources button[aria-pressed="true"] { background: #14634f; border-color: #2e8b70; color: #effff8; }
.journal-sources .icon { width: 15px; height: 15px; flex-shrink: 0; }
.apanel-page .inbox-filters .filter,
.apanel-page .journal-filters .filter { justify-content: center; gap: 8px; min-height: 38px; padding: 8px 16px; border: 1px solid rgba(154,172,192,.32); border-radius: 12px; background: rgba(154,172,192,.045); color: #e2e8f0; font-size: 14px; font-weight: 600; line-height: 20px; transition: background .2s, border-color .2s; }
.apanel-page .inbox-filters .filter:hover,
.apanel-page .journal-filters .filter:hover { background: rgba(154,172,192,.12); border-color: rgba(154,172,192,.5); }
.apanel-page .inbox-filters .filter .icon,
.apanel-page .journal-filters .filter .icon { width: 18px; height: 18px; flex-basis: 18px; stroke-width: 1.8; }
.apanel-page .inbox-filters .filter[aria-pressed="true"],
.apanel-page .journal-filters .filter[aria-pressed="true"] { background: #14634f; color: #effff8; border-color: #2e8b70; }
.apanel-page .inbox-filters .filter[aria-pressed="true"]:is(:hover,:focus-visible) { background: #19765e; color: #effff8; border-color: #2e8b70; }
.apanel-page .inbox-filters .filter b { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 5px; border-radius: 999px; background: rgba(0,5,9,.4); font-size: 11px; line-height: 1; font-weight: 700; }
.apanel-page .inbox-filters .filter[aria-pressed="true"] b { background: rgba(255,255,255,.24); }
.journal-sources button { gap: 7px; padding: 8px 12px; min-height: 36px; border-radius: 10px; background: #ffffff02; border-color: #ffffff1b; font-size: 11px; color: #a8b7c2; }
.journal-sources .icon { width: 14px; height: 14px; }
.admin-quick-nav { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 82; width: 64px; max-width: 64px; max-height: min(calc(100dvh - 180px),560px); padding: 6px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02),0 18px 40px rgba(0,0,0,.28); backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%); transition: width .36s cubic-bezier(.22,1,.36,1),max-width .36s cubic-bezier(.22,1,.36,1),opacity .34s ease,transform .42s cubic-bezier(.22,1,.36,1),background .28s ease,border-color .28s ease,box-shadow .28s ease; }
.admin-quick-links { display: flex; width: 100%; flex-direction: column; gap: 8px; overflow: hidden auto; max-height: min(calc(100dvh - 194px),546px); scrollbar-width: none; }
.admin-quick-links::-webkit-scrollbar { display: none; }
.admin-quick-links .nav-link { flex: 0 0 auto; box-sizing: border-box; width: 48px; max-width: 48px; height: 48px; min-height: 48px; padding: 0 14px; gap: 0; border-radius: 16px; color: var(--quick-color,#7ef6d7); white-space: nowrap; overflow: hidden; transition: width .34s cubic-bezier(.22,1,.36,1),max-width .34s cubic-bezier(.22,1,.36,1),gap .3s ease,transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease,color .24s ease; }
.admin-quick-links .nav-link:nth-child(2) { --quick-color: #8ebaf2; }
.admin-quick-links .nav-link:nth-child(3) { --quick-color: #f2c75c; }
.admin-quick-links .nav-link:nth-child(4) { --quick-color: #c4a4ef; }
.admin-quick-links .nav-link:nth-child(5) { --quick-color: #f29cba; }
.admin-quick-links .nav-link > .icon { flex: 0 0 19px; width: 19px; height: 19px; opacity: .94; transition: transform .24s,filter .24s; }
.admin-quick-links .nav-link > span { min-width: 0; max-width: 0; opacity: 0; color: #d7e2ee; font-size: .82rem; font-weight: 700; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; transform: translateX(-8px); transition: opacity .22s ease,max-width .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1); }
.admin-quick-links .nav-link::after,.admin-quick-links .nav-count { display: none; }
.admin-quick-links .nav-link[aria-current="page"] { background: color-mix(in srgb,var(--quick-color,#7ef6d7) 14%,transparent); border-color: color-mix(in srgb,var(--quick-color,#7ef6d7) 32%,transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025),0 14px 30px rgba(0,0,0,.26); }
.admin-quick-links .nav-link:hover { transform: translateX(2px); border-color: color-mix(in srgb,var(--quick-color,#7ef6d7) 28%,transparent); background: color-mix(in srgb,var(--quick-color,#7ef6d7) 11%,transparent); }
.admin-quick-links .nav-link:hover > .icon { transform: scale(1.08); }
.admin-quick-toggle { display: none; }
.app-shell[data-loading="true"] .admin-quick-nav { visibility: hidden; }
body.dialog-open .admin-quick-nav { visibility: hidden; }
@media (min-width: 901px) {
  .apanel-page .workspace { padding-left: 100px; }
  .admin-quick-nav:is(:hover,:focus-within) { width: 224px; max-width: 224px; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03),0 18px 40px rgba(0,0,0,.32); }
  .admin-quick-nav:is(:hover,:focus-within) .nav-link { width: 100%; max-width: 208px; gap: 12px; }
  .admin-quick-nav:is(:hover,:focus-within) .nav-link > span { max-width: 132px; opacity: 1; transform: translateX(0); transition-delay: .22s; }
}
@media (max-width: 900px) {
  .admin-quick-nav { display: flex; flex-direction: column-reverse; align-items: center; top: auto; bottom: calc(env(safe-area-inset-bottom,0px) + 6px); left: auto; right: max(14px,calc(env(safe-area-inset-right,0px) + 10px)); transform-origin: bottom right; width: 46px; max-width: 46px; height: 46px; max-height: 46px; transform: none; border-radius: 999px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); transition: width .36s cubic-bezier(.16,1,.3,1),max-width .36s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1),max-height .4s cubic-bezier(.16,1,.3,1),border-radius .36s cubic-bezier(.16,1,.3,1),background .24s ease,border-color .24s ease; }
  .admin-quick-toggle { display: flex; flex: 0 0 34px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #d8e4ef; cursor: pointer; }
  .admin-quick-toggle > span { width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s,opacity .22s; }
  .admin-quick-toggle[aria-expanded="true"] > span:first-child { transform: translateY(7px) rotate(45deg); }
  .admin-quick-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .admin-quick-toggle[aria-expanded="true"] > span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .admin-quick-links { flex: 1 1 auto; min-height: 0; gap: 6px; max-height: 0; margin-bottom: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: max-height .32s cubic-bezier(.16,1,.3,1),margin-bottom .22s ease,opacity .18s ease,transform .26s cubic-bezier(.16,1,.3,1),visibility .32s; }
  .admin-quick-nav.is-open { width: 58px; max-width: 58px; height: min(280px,calc(100svh - 96px)); max-height: min(280px,calc(100svh - 96px)); border-radius: 28px; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
  .admin-quick-nav.is-open .admin-quick-links { max-height: min(224px,calc(100svh - 160px)); margin-bottom: 10px; opacity: 1; visibility: visible; transform: translateY(0); }
  .admin-quick-links .nav-link { width: 40px; max-width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; margin-inline: auto; border-radius: 50%; }
  .admin-quick-links .nav-link > .icon { width: 16px; height: 16px; flex-basis: 16px; }
  .admin-quick-links .nav-link[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
  .apanel-page .inbox-filters .filter,
  .apanel-page .journal-filters .filter { min-height: 44px; }
  .journal-sources button { min-height: 40px; }
}
.journal-panel { min-width: 0; }
.journal-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: #94a3b8; font-size: 12px; margin-bottom: 20px; }
.journal-caption > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.journal-caption .icon { width: 16px; height: 16px; }
.journal-date { margin: 24px 0 10px; color: #aebdcd; font-size: 13px; font-weight: 600; }
.journal-entry { --journal-tone: #8ebaf2; min-width: 0; margin: 8px 0; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: transparent; box-shadow: 0 24px 60px rgba(0,0,0,.34); backdrop-filter: blur(18px) saturate(1.14); -webkit-backdrop-filter: blur(18px) saturate(1.14); }
.journal-entry[data-level="error"] { --journal-tone: #ff8096; }
.journal-entry[data-level="warning"] { --journal-tone: #f2c75c; }
.journal-entry > summary { display: grid; grid-template-columns: 22px minmax(0,1fr) auto 16px; align-items: center; gap: 12px; padding: 16px; list-style: none; cursor: pointer; }
.journal-entry > summary::-webkit-details-marker { display: none; }
.journal-entry > summary::marker { content: ''; }
.journal-symbol { color: var(--journal-tone); display: flex; }
.journal-symbol .icon { width: 21px; height: 21px; }
.journal-copy { min-width: 0; }
.journal-copy > strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #e2e8f0; font-size: 14px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.journal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 5px; color: #94a3b8; font-size: 11px; line-height: 1.5; }
.journal-level { color: var(--journal-tone); }
.journal-repeat { color: #d0dbe6; font-variant-numeric: tabular-nums; }
.journal-entry time { color: #aebdcd; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.journal-chevron { width: 16px; height: 16px; color: #94a3b8; transition: transform .2s ease; }
.journal-entry[open] .journal-chevron { transform: rotate(90deg); }
.journal-details { min-width: 0; padding: 0 16px 16px; border-top: 1px solid rgba(148,163,184,.12); }
.journal-entry[open] .journal-details { animation: journal-details-in .2s ease; }
.journal-detail-caption { display: flex; align-items: center; gap: 7px; padding-top: 14px; color: #94a3b8; font-size: 11px; line-height: 1.5; flex-wrap: wrap; }
.journal-detail-caption .icon { width: 15px; height: 15px; }
.journal-details pre { margin: 10px 0 0; max-height: min(320px,45svh); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #cbd5e1; font: 12px/1.7 ui-monospace,monospace; tab-size: 2; }
.journal-empty { display: grid; justify-items: center; gap: 12px; padding: 50px 20px; text-align: center; color: #94a3b8; }
.journal-empty > .icon { width: 32px; height: 32px; }
.journal-empty strong { color: #cbd5e1; font-size: 16px; }
.journal-empty p { max-width: 500px; margin: 0; font-size: 13px; line-height: 1.7; }
.journal-more { display: flex; margin: 20px auto 0; }
@keyframes journal-details-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .journal-entry > summary { grid-template-columns: 20px minmax(0,1fr) 14px; padding: 13px; gap: 9px; } .journal-entry time { grid-column: 2; grid-row: 2; } .journal-entry > summary > .journal-chevron { grid-column: 3; grid-row: 1 / span 2; } .journal-copy > strong { font-size: 13px; } .journal-details { padding-inline: 13px; } }
@media (prefers-reduced-motion: reduce) { .journal-chevron { transition: none; } .journal-entry[open] .journal-details { animation: none; } }
html[data-motion="reduce"] .journal-chevron { transition: none; }
html[data-motion="reduce"] .journal-entry[open] .journal-details { animation: none; }
.workspace { margin-left: 0; max-width: 1440px; margin-inline: auto; padding: 22px 28px 0; }
[data-user-avatar] img { width: 100%; height: 100%; object-fit: cover; }
main { max-width: none; padding: 32px 0 95px; }
.workspace-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 28px; }
.workspace-tabs .nav-link { display: inline-flex; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 16px; border: 1px solid rgba(154,172,192,.32); border-radius: 12px; background: rgba(154,172,192,.045); color: #e2e8f0; font-size: 14px; font-weight: 600; line-height: 20px; }
.workspace-tabs .nav-link:hover { background: rgba(154,172,192,.12); border-color: rgba(154,172,192,.5); }
.workspace-tabs .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8; }
.workspace-tabs .nav-link[aria-current="page"] { background: #14634f; color: #effff8; border-color: #2e8b70; }
.workspace-tabs .nav-link::after { display: none; }
.app-shell[data-loading="true"] :is(.admin-home-link,.admin-workspace-header,.admin-search,.workspace-tabs,.demo-banner,.page-footer,.bottom-nav,#view) { visibility: hidden; }
.admin-home-link { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 0 4px; padding: 4px 0; border: 0; background: transparent; color: #cbd5e1; font: inherit; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .18s ease; }
.admin-home-link svg { width: 23px; height: 23px; flex-shrink: 0; transition: transform .2s ease; }
.admin-home-link:is(:hover,:focus-visible) { color: #f1f5f9; }
.admin-home-link:is(:hover,:focus-visible) svg { transform: translateX(-3px); }
@media (max-width: 700px) { .admin-home-link { font-size: 14px; gap: 8px; } .admin-home-link svg { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { .admin-home-link,.admin-home-link svg { transition: none; transform: none !important; } }
html[data-motion="reduce"] .admin-home-link,html[data-motion="reduce"] .admin-home-link svg { transition: none; transform: none; }
.admin-workspace-header { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 10px 0 28px; }
.admin-workspace-avatar { display: block; flex: 0 0 76px; width: 76px; height: 76px; object-fit: cover; border: 1px solid rgba(163,184,202,.12); border-radius: 22px; background: rgba(130,151,170,.055); }
.admin-workspace-identity { min-width: 0; flex: 1 1 180px; }
.admin-workspace-identity p { margin: 0 0 4px; color: #cbd5e1; font-size: 14px; font-weight: 550; line-height: 1.4; }
.admin-workspace-identity h1 { margin: 0; color: #eef3f8; font-size: clamp(25px,3vw,36px); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.admin-summary-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-left: auto; padding: 12px; border: 1px solid rgba(148,163,184,.15); border-radius: 17px; background: rgba(255,255,255,.035); }
.admin-summary-counts { display: flex; align-items: center; gap: 12px; padding: 0 10px 0 2px; margin-right: 2px; border-right: 1px solid rgba(148,163,184,.2); }
.admin-summary-counts > span { display: inline-flex; align-items: center; gap: 5px; color: #cbd5e1; font-size: 12px; }
.admin-summary-toolbar svg { display: block; width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.8; }
.admin-summary-toolbar > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 33px; padding: 7px 10px; border: 1px solid rgba(148,163,184,.25); border-radius: 9px; background: rgba(148,163,184,.06); color: #dce5ef; font: inherit; font-size: 12px; font-weight: 550; cursor: pointer; transition: background .2s,border-color .2s; }
.admin-summary-toolbar > button:hover:not(:disabled) { background: rgba(148,163,184,.15); border-color: rgba(148,163,184,.45); }
.admin-summary-toolbar > button:disabled { opacity: .45; cursor: not-allowed; }
#workspace-bot-control[data-status="online"] { color: #00d9a5; background: rgba(0,217,165,.12); border-color: rgba(0,217,165,.35); }
#workspace-bot-control[data-status="offline"] { color: #fb7185; background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.3); }
#workspace-bot-control[data-status="maintenance"] { color: #f2b657; background: rgba(242,182,87,.1); border-color: rgba(242,182,87,.3); }
.admin-summary-toolbar > button:hover:not(:disabled) > svg { animation: admin-tool-pop .38s ease; }
.admin-summary-toolbar > .refresh-button:hover:not(:disabled) > svg { animation: admin-tool-turn .55s ease; }
.admin-summary-toolbar > .refresh-button[aria-busy="true"] > svg { animation: admin-tool-turn .8s linear infinite; }
.admin-search { display: flex; align-items: center; gap: 13px; padding: 16px 20px; margin-bottom: 18px; width: 100%; background: rgba(153,171,187,.045); border: 1px solid rgba(162,181,199,.17); border-radius: 17px; transition: border-color .2s,background .2s; }
.admin-search:focus-within { border-color: #00d9a5; background: rgba(153,171,187,.07); }
.admin-search > svg { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: #9baaba; stroke-width: 1.6; }
.admin-search input { width: 100%; min-width: 0; padding: 0; color: #e5edf5; background: none; border: 0; outline: 0; font: inherit; font-size: 14px; text-overflow: ellipsis; }
.admin-search input::placeholder { color: #8391a2; }
.admin-search input::-webkit-search-cancel-button { display: none; }
.admin-search-shortcut { flex-shrink: 0; color: #aeb9c7; font-size: 12px; white-space: nowrap; }
.admin-search kbd { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 28px; height: 28px; box-sizing: border-box; color: #e2e8f0; background: rgba(226,232,240,.07); border: 1px solid rgba(154,172,192,.4); border-radius: 7px; padding: 0 7px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1; box-shadow: inset 0 -2px 0 rgba(226,232,240,.06); }
.admin-search-clear { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; padding: 5px; border: 0; background: transparent; color: #94a3b8; border-radius: 9px; }
.admin-search-clear[hidden],#view [hidden] { display: none !important; }
.admin-search-clear svg { width: 20px; height: 20px; }
@keyframes admin-tool-pop { 50% { transform: scale(1.12); } }
@keyframes admin-tool-turn { to { transform: rotate(360deg); } }
.session-gate[data-state="loading"] { pointer-events: none; z-index: 10; }
.hero-card,.metric,.panel,.server-card,.inbox-card,.admin-module { border-color: var(--line); border-radius: 24px; background: linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),rgba(17,26,34,.55); box-shadow: inset 0 1px 0 #ffffff06; }
.hero-card h2,.panel-heading h2,.metric-head,.event-copy strong,.page-description { color: #cbd5e1; }
.live-data-note,.metric small,.event-copy small,.server-card p,.hero-card p:not(.eyebrow) { color: #94a3b8; }
.button { border-radius: 14px; min-height: 42px; color: #e2e8f0; background: rgba(255,255,255,.045); border: 1px solid rgba(148,163,184,.24); transition: border-color .2s,transform .2s; }
.button:hover { background: rgba(255,255,255,.065); color: #f1f5f9; border-color: rgba(148,163,184,.4); }
.button .icon { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.button:hover .icon,.admin-record:hover > .icon { transform: scale(1.12); }
.button.danger { background: #be123c20; border-color: #fb71854d; color: #fecdd3; }
.button[data-tool="release-new"] { background: #14634f; color: #effff8; border-color: #2e8b70; }
.search-bar,.search-field { background: rgba(5,12,18,.58); color: #e2e8f0; border: 1px solid rgba(148,163,184,.24); border-radius: 16px; }
.search-bar input::placeholder,.search-field input::placeholder { color: #94a3b8; }
.admin-module-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.ping-history { margin-top: 20px; }
.ping-history svg[role="img"] { display: block; width: 100%; height: 180px; color: #60d9b3; overflow: visible; }
.ping-history .panel-heading { align-items: center; flex-wrap: wrap; gap: 12px; }
.ping-history .panel-heading small { color: #94a3b8; font-size: 10px; letter-spacing: .04em; }
.ping-summary { display: flex; gap: clamp(20px,5vw,64px); margin: 18px 0 22px; }
.ping-summary > span { display: grid; gap: 3px; color: #94a3b8; font-size: 12px; }
.ping-summary strong { color: #e2e8f0; font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ping-summary strong small { color: #94a3b8; font-size: 12px; font-weight: 500; }
.ping-chart { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 8px 10px; min-width: 0; }
.ping-axis { position: relative; height: 180px; color: #94a3b8; font-size: 11px; font-variant-numeric: tabular-nums; }
.ping-axis > span { position: absolute; right: 0; transform: translateY(-50%); }
.ping-gridline { stroke: rgba(148,163,184,.16); stroke-width: 1; stroke-dasharray: 4 6; }
.ping-times { display: flex; justify-content: space-between; gap: 10px; grid-column: 2; color: #94a3b8; font-size: 11px; font-variant-numeric: tabular-nums; }
.ping-times[data-single="true"] { justify-content: center; }
.ping-history > .live-data-note { margin: 16px 0 0; font-size: 11px; line-height: 1.6; }
.metric[data-tone],.metric-icon { --tile-accent: #60d394; }
.metric[data-tone="servers"],.metric-icon[data-tone="servers"] { --tile-accent: #70c9e8; }
.metric[data-tone="users"],.metric-icon[data-tone="users"] { --tile-accent: #f2c75c; }
.metric[data-tone="command"],.metric-icon[data-tone="command"] { --tile-accent: #a89aff; }
.metric[data-tone="pulse"],.metric-icon[data-tone="pulse"] { --tile-accent: #5ee0c0; }
.metric { border: 1px solid rgba(163,184,202,.16); border-radius: 18px; background: rgba(130,151,170,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); overflow: hidden; }
.metric::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tile-accent,#60d394); opacity: .3; }
.metric-head { gap: 12px; color: #cbd5e1; font-size: 13px; font-weight: 600; }
.metric-icon { display: inline-grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; color: var(--tile-accent); background: color-mix(in srgb,var(--tile-accent) 13%,transparent); }
.metric-icon[data-tone="inbox"] { --tile-accent: #ed79b0; }
.metric-icon[data-tone="session"] { --tile-accent: #60d394; }
.metric-icon[data-tone="shield"] { --tile-accent: #70c9e8; }
.metric-icon[data-tone="clock"] { --tile-accent: #f2b657; }
.panel-heading .metric-icon svg { width: 23px; height: 23px; flex-basis: 23px; color: inherit; }
.metric-head .metric-icon svg,.ping-history .metric-icon svg { width: 23px; height: 23px; flex-basis: 23px; color: inherit; }
.shortcut .module-icon,.service-icon,.event-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; background: color-mix(in srgb,var(--tone,#60d394) 13%,transparent); }
.admin-module[data-symbol="users"] .module-icon { color: #f2c75c; background: rgba(242,199,92,.13); }
.admin-module[data-symbol="bolt"] .module-icon,.admin-module[data-symbol="wallet"] .module-icon { color: #f2b657; background: rgba(242,182,87,.13); }
.admin-module[data-symbol="shield"] .module-icon { color: #70c9e8; background: rgba(112,201,232,.13); }
.server-card .server-avatar { width: 56px; height: 56px; border: 1px solid rgba(163,184,202,.16); border-radius: 16px; background: rgba(130,151,170,.055); overflow: hidden; }
.server-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.server-avatar.has-icon .server-avatar-fallback { display: none; }
.server-card { display: flex; flex-direction: column; min-width: 0; }
.server-card-header,.server-card-copy { min-width: 0; }
.server-card-copy { margin-bottom: 18px; }
.server-card h2 { overflow-wrap: anywhere; }
.server-card p { overflow-wrap: anywhere; margin-bottom: 0; }
.server-card .premium-label { position: static; display: inline-flex; margin-top: 8px; }
.server-card > .button { margin-top: auto; min-width: 0; gap: 12px; }
.server-card .button-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-module { display: flex; align-items: center; gap: 16px; padding: 24px; text-align: left; color: #e2e8f0; transition: border-color .2s,transform .2s; }
.admin-module:hover { border-color: rgba(var(--ui-accent-rgb, 0, 224, 164), 0.302); transform: translateY(-2px); }
.admin-module > span:nth-child(2) { min-width: 0; flex: 1; }
.admin-module strong { display: block; font-size: 16px; font-weight: 650; }
.admin-module small { display: block; margin-top: 7px; color: #94a3b8; font-size: 12px; line-height: 1.5; }
.admin-module > .icon { color: #94a3b8; width: 17px; }
.admin-module .module-icon { color: #60d9b3; background: rgba(var(--ui-accent-rgb, 0, 224, 164), 0.078); width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; }
#detail-dialog { width: min(1040px,calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: hidden; background: #10171d; border-color: #2a3542; border-radius: 26px; }
#detail-dialog[open] { display: flex; flex-direction: column; }
.dialog-heading { flex-shrink: 0; padding: 25px 28px; background: #1b2026; }
.dialog-heading .eyebrow { display: none; }
.dialog-heading h2 { font-size: 23px; font-weight: 700; color: #f1f5f9; }
.dialog-heading .module-icon { width: 50px; height: 50px; flex-basis: 50px; border-radius: 16px; }
.dialog-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #00d6a3 #ffffff04; padding: 28px; color: #cbd5e1; }
.dialog-content h3 { display: flex; align-items: center; gap: 9px; color: #e2e8f0; }
.dialog-content .panel-info { align-items: flex-start; color: #94a3b8; font-size: 12px; }
.dialog-content .panel-info > .icon { height: 1.7em; }
.dialog-footer { flex-shrink: 0; padding: 18px 28px; align-items: center; background: #ffffff03; }
.dialog-footer > .button { flex: initial; }
.dialog-footer > .button .icon { order: 1; }
.dialog-footer > .button:hover .icon { animation: return-arrow .45s ease; }
.dialog-footer .save-button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; animation: save-reveal .24s cubic-bezier(.2,.8,.2,1); }
.dialog-footer .save-button:is(:hover,:focus,:active,:disabled) { background: #14634f; color: #effff8; opacity: 1; filter: none; }
.admin-form { display: grid; gap: 20px; }
.admin-release-product { display: grid; gap: 20px; margin: 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.admin-release-product legend { color: #e2e8f0; font-size: 16px; font-weight: 650; padding-right: 14px; }
.admin-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.admin-field { display: grid; gap: 9px; min-width: 0; color: #e2e8f0; font-size: 14px; font-weight: 500; }
.admin-field :is(input,textarea,select),.search-field input { width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1px solid rgba(148,163,184,.24); border-radius: 14px; background: rgba(5,12,18,.58); color: #e2e8f0; font-size: 16px; font-weight: 400; outline: none; transition: border-color .2s; }
.admin-field textarea { min-height: 190px; resize: vertical; }
.admin-field option { color: #e2e8f0; background: #19232d; }
.admin-field :is(input,textarea,select):focus { border-color: rgba(var(--ui-accent-rgb, 0, 224, 164), 0.502); }
.admin-setting { display: flex; align-items: center; position: relative; gap: 14px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: #ffffff03; cursor: pointer; }
.admin-setting input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.setting-status { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 46px; height: 30px; border-radius: 999px; background: #fb718514; color: #fb7185; font-size: 12px; font-weight: 700; transition: color .2s,background .2s; }
.setting-status::after { content: 'Wył.'; }
.admin-setting input:checked + .setting-status { color: #00e0a4; background: #00e0a41c; }
.admin-setting input:checked + .setting-status::after { content: 'Wł.'; }
.admin-setting input:focus-visible + .setting-status { outline: 2px solid #00e0a4; outline-offset: 3px; }
.admin-setting strong { font-size: 14px; font-weight: 600; }
.admin-setting small { display: block; color: #94a3b8; font-size: 12px; margin-top: 5px; }
.admin-inline-form { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.admin-inline-form > label { flex: 1; min-width: 0; }
.search-field { display: flex; align-items: center; gap: 10px; padding-left: 14px; }
.search-field input { background: transparent; border: 0; }
.admin-records { display: grid; gap: 12px; }
.admin-record { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 17px; text-align: left; color: #e2e8f0; border: 1px solid var(--line); border-radius: 16px; background: #ffffff03; }
.admin-record > span { min-width: 0; }
.admin-record strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.admin-record small { display: block; color: #94a3b8; font-size: 12px; margin-top: 5px; }
.admin-record > .icon { color: #94a3b8; transition: transform .2s; }
.admin-toolbar,.admin-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.admin-pagination { margin: 20px 0 0; justify-content: flex-end; }
.admin-diagnostics { margin: 0; }
.admin-diagnostics > div { display: grid; grid-template-columns: minmax(100px,1fr) minmax(0,2fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.admin-diagnostics dt { color: #94a3b8; font-size: 12px; overflow-wrap: anywhere; }
.admin-diagnostics dd { min-width: 0; margin: 0; color: #e2e8f0; font-size: 13px; }
.admin-loading { display: grid; place-content: center; min-height: 170px; text-align: center; color: #cbd5e1; }
.admin-loading-label { white-space: nowrap; }
.admin-confirm,.toast,.bottom-nav { background: var(--workspace-glass); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px rgba(0,0,0,.34); backdrop-filter: blur(18px) saturate(1.14); -webkit-backdrop-filter: blur(18px) saturate(1.14); }
.admin-confirm { position: fixed; inset: auto; margin: 0; width: max-content; max-width: min(320px,calc(100vw - 16px)); padding: 12px; border-radius: 16px; z-index: 100; color: #e2e8f0; animation: save-reveal .2s ease; }
.admin-confirm p { margin: 0 0 10px; font-size: 13px; text-align: center; white-space: pre-line; overflow-wrap: anywhere; }
.admin-confirm .button { width: 100%; min-height: 34px; font-size: 12px; }
@keyframes return-arrow { 50% { transform: translateX(3px); } }
@keyframes save-reveal { from { opacity: 0; transform: scale(.88) translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .admin-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) {
  .workspace { padding: max(12px,env(safe-area-inset-top)) 16px 0; }
  main { padding: 28px 0 110px; }
  .workspace-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .workspace-tabs::-webkit-scrollbar { display: none; }
  .workspace-tabs .nav-link { flex: 0 0 auto; }
  .admin-summary-toolbar { flex: 1 1 100%; margin-left: 0; }
  .bottom-nav { background: transparent; border-radius: 24px; padding: 8px; }
  .bottom-nav .nav-link { font-size: 10px; padding-inline: 2px; }
  .bottom-nav .nav-link[aria-current="page"] { background: #14634f; color: #effff8; }
}
@media (max-width: 600px) {
  .metric-head { gap: 9px; font-size: 12px; }
  .metric-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 11px; }
  .metric-head .metric-icon svg { width: 20px; height: 20px; flex-basis: 20px; }
  .panel-heading .metric-icon svg { width: 20px; height: 20px; flex-basis: 20px; }
  .ping-summary { justify-content: space-between; gap: 10px; }
  .ping-summary strong { font-size: 20px; }
  .ping-summary > span { font-size: 11px; }
  .ping-chart { grid-template-columns: 34px minmax(0,1fr); gap: 8px; }
  .admin-workspace-header { gap: 12px; }
  .admin-workspace-avatar { width: 60px; height: 60px; flex-basis: 60px; border-radius: 18px; }
  .admin-summary-toolbar { flex-wrap: nowrap; padding: 10px; min-width: 0; }
  .admin-summary-toolbar > button { min-width: 0; font-size: 11px; }
  .admin-summary-toolbar > button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-summary-counts { gap: 8px; padding-right: 8px; }
  .admin-search { padding: 13px 15px; gap: 9px; }
  .admin-search-shortcut { display: none; }
  .admin-search input { font-size: 16px; }
  .workspace { padding-inline: 10px; }
  .admin-module-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .admin-module { padding: 18px; border-radius: 20px; }
  #detail-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 22px; }
  .dialog-heading,.dialog-content { padding: 20px; }
  .dialog-heading h2 { font-size: 20px; }
  .dialog-heading .module-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .dialog-footer { padding: 16px 20px; }
  .dialog-footer > .button { flex: 1; }
  .admin-fields { grid-template-columns: minmax(0,1fr); }
  .admin-inline-form { flex-wrap: wrap; }
  .admin-inline-form > label { flex-basis: 100%; }
  .admin-diagnostics > div { grid-template-columns: minmax(0,1fr); gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after { animation: none !important; transition: none !important; }

/* Mobile layouts shrink the content, not the page or its touch targets. */
.apanel-page :is(.workspace,main,#view,#results,.panel,.inbox-card) { min-width: 0; }
@media (max-width: 900px) {
  .apanel-page .workspace { padding-left: max(12px,env(safe-area-inset-left,0px)); padding-right: max(12px,env(safe-area-inset-right,0px)); }
  .apanel-page main { padding: 24px 0 calc(120px + env(safe-area-inset-bottom,0px)); }
  .apanel-page .server-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .apanel-page .server-card .favorite { display: grid; place-items: center; width: 44px; height: 44px; }
  .apanel-page .workspace-tabs { scroll-padding-inline: 2px; overscroll-behavior-x: contain; }
  .apanel-page .workspace-tabs .nav-link { min-height: 44px; white-space: nowrap; }
  .apanel-page .bottom-nav { width: min(440px,calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))); }
  .apanel-page .bottom-nav .nav-link { min-height: 52px; white-space: nowrap; }
  .apanel-page :is(.admin-search-clear,.admin-summary-toolbar > button) { min-height: 44px; }
  .apanel-page .admin-search-clear { flex-basis: 38px; width: 38px; }
  .apanel-page .filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 6px; }
  .apanel-page .filter { flex: 0 0 auto; min-height: 44px; white-space: nowrap; font-size: 12px; }
  .apanel-page .filter .icon { width: 17px; height: 17px; flex-basis: 17px; }
}
@media (max-width: 600px) {
  .apanel-page .server-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .apanel-page .server-card { padding: 16px; }
  .apanel-page .server-card-header { display: grid; grid-template-columns: 48px minmax(0,1fr) 44px; align-items: center; gap: 12px; margin-bottom: 16px; }
  .apanel-page .server-card .server-avatar { width: 48px; height: 48px; margin: 0; border-radius: 14px; }
  .apanel-page .server-card-copy { margin: 0; }
  .apanel-page .server-card h2 { font-size: 15px; line-height: 1.4; }
  .apanel-page .server-card p { font-size: 12px; line-height: 1.5; margin-top: 4px; }
  .apanel-page .server-card .favorite { position: static; align-self: start; margin-top: -4px; }
  .apanel-page .server-card .premium-label { font-size: 9px; letter-spacing: .06em; }
  .apanel-page .server-card > .button { min-height: 44px; font-size: 13px; }
  .apanel-page .admin-workspace-header { margin-bottom: 22px; }
  .apanel-page .admin-workspace-identity { flex-basis: 0; }
  .apanel-page .admin-workspace-identity h1 { font-size: clamp(22px,6vw,30px); }
  .apanel-page .admin-summary-toolbar { gap: 8px; }
  .apanel-page .admin-summary-counts { min-width: max-content; flex: 1 0 auto; flex-wrap: nowrap; }
  .apanel-page .admin-summary-counts > span { flex: 0 0 auto; white-space: nowrap; }
  .apanel-page .admin-summary-counts strong { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
  .apanel-page .admin-summary-toolbar > .refresh-button { flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; margin: 0; }
  .apanel-page .admin-summary-toolbar > button { flex-shrink: 0; }
  .apanel-page .admin-search kbd { display: inline-grid; }
  .apanel-page .metric { min-width: 0; padding: 15px 12px; }
  .apanel-page .metric-head { min-width: 0; line-height: 1.4; }
  .apanel-page .metric strong { font-size: clamp(22px,6vw,28px); overflow-wrap: anywhere; }
  .apanel-page .panel-heading { align-items: center; flex-wrap: wrap; gap: 12px; }
  .apanel-page .panel-heading h2 { min-width: 0; overflow-wrap: anywhere; }
  .apanel-page .service-row { gap: 8px; }
  .apanel-page .service-row > span:nth-child(2) { min-width: 0; flex: 1; }
  .apanel-page .service-row :is(strong,small) { overflow-wrap: anywhere; }
  .apanel-page .service-latency { flex-shrink: 0; white-space: nowrap; }
  .apanel-page .service-dot { flex-shrink: 0; }
  .apanel-page .shortcut > span:nth-child(2) { min-width: 0; flex: 1; }
  .apanel-page .shortcut :is(strong,small) { overflow-wrap: anywhere; }
  .apanel-page .inbox-card { display: grid; grid-template-columns: 36px minmax(0,1fr) 6px; gap: 10px; }
  .apanel-page .inbox-card > .module-icon { width: 36px; height: 36px; }
  .apanel-page .inbox-card :is(h2,p) { overflow-wrap: anywhere; }
  .apanel-page .inbox-card .button { min-height: 44px; max-width: 100%; font-size: 12px; }
  .apanel-page .event { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 5px 10px; }
  .apanel-page .event > .event-icon { grid-row: 1 / span 2; width: 36px; height: 36px; }
  .apanel-page .event time { grid-column: 2; padding: 0; font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
  .apanel-page .demo-banner { min-width: 0; overflow-wrap: anywhere; }
  .apanel-page .empty-state { min-height: min(250px,40svh); padding: 20px 12px; overflow-wrap: anywhere; }
}