@font-face {
font-family: 'Proxima Nova';
src: url('assets/fonts/ProximaNova-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Proxima Nova';
src: url('assets/fonts/Proxima-Nova-Semibold.otf') format('opentype');
font-weight: 600;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Proxima Nova';
src: url('assets/fonts/Proxima-Nova-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: block;
}
:root {
--brand: #00a6fa;
--brand-rgb: 0, 166, 250;
--backdrop: rgba(6, 6, 6, 0.72);
--panel: #191919;
--sidebar: #131313;
--card: #111111;
--card-line: #252525;
--raise-top: #1c1c1c;
--raise-bottom: #111111;
--chip: rgba(10, 10, 10, 0.82);
--sunken: rgba(12, 12, 12, 0.2);
--line: rgba(255, 255, 255, 0.06);
--line-soft: rgba(255, 255, 255, 0.04);
--text: #ffffff;
--text-2: #cfcdcc;
--text-3: rgba(255, 255, 255, 0.75);
--text-4: rgba(255, 255, 255, 0.35);
--danger: #f44144;
--warn: #e0a458;
--open: #e58d35;
--ok: #42cc90;
--danger-line: rgba(244, 65, 68, 0.24);
--danger-fill: rgba(244, 65, 68, 0.2);
--track: rgba(255, 255, 255, 0.06);
--sheen-soft: radial-gradient(ellipse 62% 270% at 24% 176%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 62%);
--sheen: radial-gradient(ellipse 62% 270% at 24% 176%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 62%);
--row: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
--raise: linear-gradient(180deg, var(--raise-top) 0%, var(--raise-bottom) 100%);
--ease: cubic-bezier(0.32, 0.72, 0.28, 1);
--sans: 'Proxima Nova', 'Inter', 'Segoe UI', sans-serif;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background: transparent;
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}
button {
font-family: inherit;
border: 0;
background: none;
padding: 0;
cursor: pointer;
text-align: left;
}
p {
margin: 0;
}
img {
display: block;
pointer-events: none;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
body.preview {
background: #060606;
}
.overlay {
display: none;
position: fixed;
inset: 0;
align-items: center;
justify-content: center;
background: var(--backdrop);
}
.panel {
display: flex;
gap: 1.389vh;
width: 137.5vh;
height: 91.667vh;
padding: 1.389vh;
border-radius: 2.222vh;
background: var(--panel);
overflow: hidden;
}
@media (resolution: 1dppx) {
.panel {
will-change: transform;
}
}
.stack {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.37vh;
}
.sidebar {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 30.648vh;
padding: 1.111vh;
border-radius: 1.759vh;
background: var(--sidebar);
}
.brand {
display: flex;
align-items: center;
gap: 0.926vh;
flex-shrink: 0;
height: 6.852vh;
padding: 1.204vh;
border: 1px solid var(--line);
border-radius: 1.019vh;
background-image: var(--sheen), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
}
.brand-mark {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 4.63vh;
height: 4.63vh;
border-radius: 1.019vh;
background: #0b0b0b;
}
.brand-logo {
width: 3.148vh;
height: 3.148vh;
object-fit: contain;
}
.brand-name {
font-size: 1.481vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
}
.brand-sub {
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
}
.nav {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
padding-top: 1.389vh;
overflow-y: auto;
}
.nav-group {
display: flex;
flex-direction: column;
gap: 0.833vh;
}
.nav-label {
padding-left: 1.204vh;
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.139vh;
color: var(--text-4);
}
.nav-items {
display: flex;
flex-direction: column;
gap: 0.463vh;
}
.nav-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.926vh;
align-self: stretch;
padding: 1.204vh;
border-radius: 1.019vh;
transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.nav-item:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.nav-item:active {
background-color: rgba(255, 255, 255, 0.05);
}
.nav-item:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.nav-item.is-active {
box-shadow: inset 0 0 0 1px var(--line);
background-color: transparent;
background-image: var(--sheen), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
}
.nav-main {
display: flex;
align-items: center;
gap: 0.926vh;
}
.nav-text {
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
white-space: nowrap;
transition: color 180ms var(--ease);
}
.nav-item.is-active .nav-text {
color: var(--text);
}
.ico {
display: block;
flex-shrink: 0;
width: 1.481vh;
height: 1.481vh;
opacity: 0.81;
transition: opacity 180ms var(--ease);
}
.ico img {
width: 1.481vh;
height: 1.481vh;
filter: brightness(0) invert(1);
}
.nav-item:hover .ico,
.nav-item.is-active .ico {
opacity: 1;
}
.glyph {
position: relative;
display: block;
flex-shrink: 0;
}
.glyph img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: none;
}
.glyph-nav {
width: 1.481vh;
height: 1.481vh;
}
.glyph-nav img {
width: 3.296vh;
height: 3.173vh;
}
.glyph-sm {
display: flex;
align-items: center;
justify-content: center;
width: 2.685vh;
height: 2.685vh;
border: 1px solid var(--line);
border-radius: 0.703vh;
background-image: var(--sheen), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
}
.glyph-sm img {
width: 2.276vh;
height: 2.19vh;
}
.glyph-lg {
display: flex;
align-items: center;
justify-content: center;
width: 3.889vh;
height: 3.889vh;
border: 1px solid var(--line);
border-radius: 1.019vh;
background-image: var(--sheen), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
}
.glyph-lg img {
width: 3.296vh;
height: 3.173vh;
}
.badge {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 2.5vh;
height: 1.574vh;
padding: 0 0.556vh;
border: 1px solid var(--line);
border-radius: 0.37vh;
background: var(--sunken);
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
}
.badge.is-danger {
border-color: var(--danger-line);
background: var(--danger-fill);
}
.badge-wide {
width: 3.889vh;
height: 1.852vh;
}
.badge-bare {
border-color: transparent;
}
.viewer {
display: flex;
flex-direction: column;
gap: 0.926vh;
flex-shrink: 0;
margin-top: 0.926vh;
padding: 1.204vh;
border: 1px solid var(--line);
border-radius: 1.019vh;
background-image: var(--sheen), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
}
.viewer-id {
display: flex;
align-items: center;
gap: 0.926vh;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.685vh;
height: 2.685vh;
border-radius: 50%;
background: #0b0b0b;
overflow: hidden;
}
.avatar img {
position: absolute;
left: 0;
top: 0;
width: 2.685vh;
height: 2.685vh;
object-fit: cover;
}
.avatar-lg {
width: 3.241vh;
height: 3.241vh;
border-radius: 0.741vh;
}
.avatar-lg img {
width: 3.241vh;
height: 3.241vh;
}
.viewer-name {
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
}
.viewer-role {
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
}
.duty {
display: flex;
align-items: center;
justify-content: space-between;
align-self: stretch;
height: 3.519vh;
padding: 1.204vh;
border: 1px solid var(--line);
border-radius: 1.019vh;
background-image: var(--sheen), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
transition: border-color 180ms var(--ease);
}
.duty:hover {
border-color: rgba(255, 255, 255, 0.14);
}
.duty.is-on {
border-color: rgba(104, 221, 88, 0.12);
background-color: rgba(104, 221, 88, 0.1);
background-image: none;
}
.duty.is-on:hover {
border-color: rgba(104, 221, 88, 0.34);
}
.duty:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.duty-state {
display: flex;
align-items: center;
gap: 0.648vh;
}
.duty-label {
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.065vh;
text-transform: uppercase;
color: var(--text);
}
.dot {
position: relative;
display: block;
flex-shrink: 0;
width: 0.648vh;
height: 0.648vh;
}
.dot img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 3.204vh;
height: 3.204vh;
max-width: none;
}
.dot-plain img {
width: 0.648vh;
height: 0.648vh;
}
.content {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-width: 0;
overflow-y: auto;
}
.page-head {
display: flex;
align-items: center;
gap: 0.926vh;
flex-shrink: 0;
height: 6.667vh;
padding: 1.389vh;
border-radius: 1.574vh;
background: var(--sidebar);
}
.page-title {
font-size: 1.481vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
}
.page-sub {
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
}
.kpi-row {
display: flex;
gap: 1.389vh;
flex-shrink: 0;
}
.kpi {
display: flex;
flex-direction: column;
gap: 0.926vh;
flex: 1 1 0;
min-width: 0;
height: 10.278vh;
padding: 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 1.574vh;
background: var(--raise);
}
.kpi-head {
display: flex;
align-items: center;
gap: 0.926vh;
}
.kpi-name {
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
}
.kpi-value {
display: flex;
align-items: baseline;
gap: 0.926vh;
white-space: nowrap;
}
.kpi-value b {
font-size: 1.852vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
}
.kpi-value i {
font-size: 1.481vh;
font-weight: 600;
font-style: normal;
line-height: 1.2;
color: var(--text-3);
}
.kpi-value em {
font-size: 0.926vh;
font-weight: 400;
font-style: normal;
line-height: 1.2;
color: var(--text-3);
}
.meter {
position: relative;
height: 0.556vh;
border-radius: 1.667vh;
background: var(--track);
overflow: hidden;
}
.meter span {
position: absolute;
inset: 0;
border-radius: 1.019vh;
background: var(--brand);
transform: scaleX(0);
transform-origin: left center;
transition: transform 320ms var(--ease);
}
.split {
display: flex;
gap: 1.389vh;
flex-shrink: 0;
height: 62vh;
}
.split-col {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 0;
min-width: 0;
}
.split-col > .card:first-child {
flex: 0 0 auto;
}
.split-col > .card:last-child {
flex: 1 1 auto;
min-height: 0;
}
.card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.926vh;
flex: 1 1 0;
min-width: 0;
padding: 1.389vh;
border: 1px solid var(--card-line);
border-radius: 1.574vh;
background: var(--card);
}
.card-clip {
overflow: hidden;
}
.card-head {
display: flex;
align-items: center;
gap: 0.926vh;
flex-shrink: 0;
}
.card-title {
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
}
.card-sub {
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
}
.card-fade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 8.611vh;
border-radius: 0 0 1.574vh 1.574vh;
background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, var(--card) 100%);
pointer-events: none;
}
.feed {
display: flex;
flex-direction: column;
gap: 0.926vh;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.926vh;
flex-shrink: 0;
padding: 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 1.574vh;
background: var(--row);
transition: border-color 180ms var(--ease);
}
.row:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.row-main {
display: flex;
align-items: flex-start;
gap: 1.019vh;
min-width: 0;
}
.row-body {
display: flex;
flex-direction: column;
gap: 1.019vh;
min-width: 0;
}
.row-title {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-meta {
display: flex;
align-items: center;
gap: 1.019vh;
}
.row-meta span {
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
}
.row-meta i {
flex-shrink: 0;
width: 0.185vh;
height: 0.185vh;
border-radius: 50%;
background: var(--text-3);
}
.health {
display: flex;
flex-direction: column;
gap: 0.926vh;
}
.health-row {
display: flex;
gap: 0.926vh;
}
.stat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.926vh;
flex: 1 1 0;
min-width: 0;
padding: 0.926vh 0.926vh 0.926vh 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 0.926vh;
background: var(--row);
}
.stat p {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tiles {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.926vh;
overflow-y: auto;
}
.tile {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
height: 7.13vh;
padding: 0.833vh;
border: 1px solid var(--line-soft);
border-radius: 1.574vh;
background: var(--raise);
transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.tile:hover {
border-color: rgba(255, 255, 255, 0.12);
}
.tile:active {
transform: scale(0.97);
}
.tile:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.tile-name {
position: absolute;
left: 1.204vh;
bottom: 0.833vh;
right: 0.833vh;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
overflow: hidden;
}
.roster {
display: flex;
flex-direction: column;
gap: 0.926vh;
}
.roster .row-main {
align-items: center;
}
.roster .row-body {
gap: 0.37vh;
}
.roster .row-title {
font-size: 1.296vh;
}
.empty {
padding: 1.389vh;
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-4);
}
.view {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
}
.view[hidden] {
display: none;
}
.workspace {
display: flex;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
}
.workspace > .card {
flex: 1 1 auto;
min-width: 0;
}
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.389vh;
flex-shrink: 0;
height: 2.685vh;
}
.toolbar-left {
display: flex;
align-items: center;
gap: 1.389vh;
min-width: 0;
}
.toolbar-count {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
}
.chips {
display: flex;
gap: 0.648vh;
}
.chip {
display: flex;
align-items: center;
justify-content: center;
height: 2.685vh;
padding: 0 1.389vh;
border-radius: 0.926vh;
background: rgba(255, 255, 255, 0.05);
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
white-space: nowrap;
transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.chip:hover {
background: rgba(255, 255, 255, 0.09);
}
.chip:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.chip.is-active {
background: rgba(var(--brand-rgb), 0.15);
color: var(--brand);
}
.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.648vh;
height: 2.685vh;
padding: 0 1.481vh;
border-radius: 0.926vh;
background: rgba(255, 255, 255, 0.05);
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
white-space: nowrap;
transition: background-color 180ms var(--ease);
}
.btn:hover {
background: rgba(255, 255, 255, 0.09);
}
.btn:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.btn-ico {
width: 1.111vh;
height: 1.111vh;
flex-shrink: 0;
}
.btn.is-danger {
background: rgba(232, 72, 75, 0.1);
color: #e8484b;
}
.btn.is-disabled {
background: rgba(255, 255, 255, 0.02);
color: var(--text-4);
pointer-events: none;
}
.btn.is-danger:hover {
background: rgba(232, 72, 75, 0.18);
}
.btn.is-warn {
background: rgba(224, 164, 88, 0.1);
color: var(--warn);
}
.btn.is-warn:hover {
background: rgba(224, 164, 88, 0.18);
}
.btn-sm {
height: 2.222vh;
padding: 0 0.833vh;
border-radius: 0.741vh;
font-size: 0.926vh;
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.926vh;
}
.section-label-row {
display: flex;
align-items: center;
gap: 0.556vh;
min-width: 0;
}
.hint-dot {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.296vh;
height: 1.296vh;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
color: var(--text-4);
cursor: help;
transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.hint-dot svg {
width: 0.648vh;
height: 0.648vh;
}
.hint-dot:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--text-2);
}
.hint-dot::after {
content: attr(data-tip);
position: absolute;
left: -0.926vh;
top: calc(100% + 0.741vh);
z-index: 5;
width: 26vh;
padding: 1.019vh 1.204vh;
border: 1px solid var(--card-line);
border-radius: 0.926vh;
background: #0d0d0d;
box-shadow: 0 0.741vh 1.852vh rgba(0, 0, 0, 0.55);
font-size: 0.926vh;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
color: var(--text-2);
text-align: left;
text-transform: none;
white-space: normal;
opacity: 0;
pointer-events: none;
transition: opacity 160ms var(--ease);
}
.hint-dot:hover::after {
opacity: 1;
}
.btn.is-success {
background: rgba(66, 204, 144, 0.12);
color: #42cc90;
}
.btn.is-success:hover {
background: rgba(66, 204, 144, 0.2);
}
.rows {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.prow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.389vh;
flex-shrink: 0;
padding: 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 1.574vh;
background: var(--row);
cursor: pointer;
transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.prow:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.prow.is-selected {
border-color: rgba(var(--brand-rgb), 0.15);
background-color: rgba(var(--brand-rgb), 0.09);
}
.prow-id {
display: flex;
align-items: center;
gap: 1.019vh;
flex-shrink: 0;
width: 25vh;
overflow: hidden;
}
.prow-id .row-meta {
min-width: 0;
overflow: hidden;
}
.prow-id .row-meta span:last-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.check {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.481vh;
height: 1.481vh;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.37vh;
transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.check:hover {
border-color: rgba(255, 255, 255, 0.24);
}
.prow.is-selected .check {
border-color: var(--brand);
background: var(--brand);
}
.check svg {
width: 1.019vh;
height: 1.019vh;
opacity: 0;
color: #06283a;
}
.prow.is-selected .check svg {
opacity: 1;
}
.ping {
display: flex;
align-items: center;
gap: 0.556vh;
flex-shrink: 0;
width: 6vh;
color: var(--text-3);
}
.ping.tone-ok {
color: var(--ok);
}
.ping.tone-warn {
color: var(--warn);
}
.ping.tone-danger {
color: var(--danger);
}
.ping.tone-muted {
color: var(--text-4);
}
.ping svg {
width: 1.019vh;
height: 0.8vh;
flex-shrink: 0;
}
.ping p {
flex: 0 0 auto;
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
}
.prow-mid {
display: flex;
align-items: center;
gap: 1.574vh;
flex: 1 1 auto;
min-width: 0;
}
.pills {
display: flex;
align-items: center;
gap: 0.648vh;
}
.prow-mid .pills {
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.pill {
display: flex;
align-items: center;
justify-content: center;
gap: 0.463vh;
flex-shrink: 0;
height: 2.685vh;
padding: 0 0.926vh;
border: 1px solid transparent;
border-radius: 2.778vh;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
white-space: nowrap;
}
.pill.has-ico {
padding-left: 0.741vh;
}
.prow-tail {
display: flex;
align-items: center;
gap: 1.944vh;
flex-shrink: 0;
}
.pill svg {
width: 1.389vh;
height: 0.741vh;
flex-shrink: 0;
}
.pill i {
width: 0.556vh;
height: 0.556vh;
border-radius: 50%;
flex-shrink: 0;
}
.pill.tone-danger {
border-color: rgba(244, 65, 68, 0.24);
background: rgba(244, 65, 68, 0.2);
}
.pill.tone-brand {
border-color: rgba(var(--brand-rgb), 0.24);
background: rgba(var(--brand-rgb), 0.2);
}
.pill.tone-success {
border-color: rgba(66, 204, 144, 0.24);
background: rgba(66, 204, 144, 0.2);
}
.pill.tone-success i {
background: #42cc90;
}
.prow-actions {
display: flex;
align-items: center;
gap: 0.648vh;
flex-shrink: 0;
}
.kebab {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.574vh;
height: 1.574vh;
color: var(--text-2);
transition: color 180ms var(--ease);
}
.kebab:hover {
color: var(--text);
}
.kebab svg {
width: 1.574vh;
height: 1.574vh;
}
.drawer {
display: flex;
flex-direction: column;
gap: 1.852vh;
flex-shrink: 0;
width: 40.833vh;
padding: 1.481vh;
border: 1px solid var(--card-line);
border-radius: 1.574vh;
background: var(--card);
overflow-y: auto;
}
.drawer[hidden] {
display: none;
}
.drawer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.926vh;
flex-shrink: 0;
}
.drawer-card {
display: flex;
align-items: center;
gap: 0.926vh;
flex: 1 1 auto;
min-width: 0;
padding: 1.204vh;
border: 1px solid var(--line);
border-radius: 1.389vh;
background-image: var(--sheen), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
}
.drawer-close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.667vh;
height: 1.667vh;
color: var(--text-3);
transition: color 180ms var(--ease);
}
.drawer-close:hover {
color: var(--text);
}
.drawer-close img {
width: 1.667vh;
height: 1.667vh;
opacity: 0.75;
transition: opacity 180ms var(--ease);
}
.drawer-close:hover img {
opacity: 1;
}
.drawer-actions {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex-shrink: 0;
}
.history-entry .row-meta span {
font-size: 1.111vh;
}
.drawer-status {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.926vh;
flex-shrink: 0;
}
.drawer-section {
display: flex;
flex-direction: column;
gap: 0.926vh;
flex-shrink: 0;
}
.section-label {
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.139vh;
color: var(--text-4);
}
.stat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.926vh;
flex-shrink: 0;
}
.stat-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0.352vh;
min-width: 0;
height: 6.204vh;
padding: 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 1.389vh;
background: var(--raise);
}
.stat-box span {
flex-shrink: 0;
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-box b {
flex-shrink: 0;
font-size: 1.481vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vitals {
display: flex;
gap: 2.407vh;
flex-shrink: 0;
}
.vital {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 0;
min-width: 0;
}
.vital-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.926vh;
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
}
.vital-head span {
color: var(--text-3);
}
.vital-head b {
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.vital-bar {
position: relative;
height: 0.556vh;
border-radius: 1.667vh;
background: var(--track);
overflow: hidden;
}
.vital-bar i {
position: absolute;
inset: 0;
border-radius: 1.019vh;
transform: scaleX(0);
transform-origin: left center;
transition: transform 320ms var(--ease);
}
.vital-bar.tone-hp i {
background: #e26a63;
}
.vital-bar.tone-armor i {
background: var(--brand);
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.833vh;
}
.tag {
display: flex;
align-items: center;
justify-content: center;
height: 3.056vh;
padding: 0 1.574vh;
border-radius: 3.333vh;
background: rgba(255, 255, 255, 0.06);
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
}
.tag.is-removable {
position: relative;
}
.tag-label {
transition: transform 180ms var(--ease);
}
.tag.is-removable:hover .tag-label {
transform: translateX(-1.019vh);
}
.tag-x {
position: absolute;
right: 0.463vh;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 2.037vh;
height: 2.037vh;
margin-top: -1.019vh;
border-radius: 50%;
opacity: 0;
color: var(--danger);
transition: opacity 180ms var(--ease);
}
.tag.is-removable:hover .tag-x {
opacity: 1;
}
.tag-x svg {
width: 0.926vh;
height: 0.926vh;
}
.vehicle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.204vh;
height: 6.852vh;
padding: 1.204vh 1.759vh 1.204vh 1.204vh;
border: 1px solid var(--line);
border-radius: 1.389vh;
background-image: var(--sheen-soft), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
}
.vehicle-main {
display: flex;
align-items: center;
gap: 1.204vh;
min-width: 0;
}
.vehicle-art {
position: relative;
flex-shrink: 0;
width: 7.13vh;
height: 4.259vh;
border-radius: 0.741vh;
overflow: hidden;
}
.vehicle-art img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 7.13vh;
height: 4.259vh;
max-width: none;
object-fit: contain;
}
.prop-art {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 4.259vh;
height: 4.259vh;
border: 1px solid var(--line);
border-radius: 0.741vh;
background: #0b0b0b;
color: var(--text-3);
}
.prop-art svg {
width: 1.852vh;
height: 1.852vh;
}
.vehicle-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.37vh;
min-width: 0;
}
.vehicle-body b {
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vehicle-body span {
font-size: 1.111vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vehicle-actions {
display: flex;
align-items: center;
gap: 0.926vh;
flex-shrink: 0;
}
.pill-btn {
display: flex;
align-items: center;
justify-content: center;
height: 3.036vh;
padding: 0 1.574vh;
border: 1px solid transparent;
border-radius: 3.333vh;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
transition: background-color 180ms var(--ease);
}
.pill-btn.is-success {
background: rgba(66, 204, 144, 0.1);
color: #42cc90;
}
.pill-btn.is-success:hover {
background: rgba(66, 204, 144, 0.18);
}
.pill-btn.is-danger {
border-color: rgba(232, 72, 75, 0.19);
background: rgba(232, 72, 75, 0.1);
color: #e8484b;
}
.pill-btn.is-danger:hover {
background: rgba(232, 72, 75, 0.18);
}
.pill-btn.is-disabled {
opacity: 0.4;
pointer-events: none;
}
.res-row.is-pending {
border-color: rgba(var(--brand-rgb), 0.32);
}
.res-row.is-pending .res-body span {
color: var(--brand);
}
.res-row.is-pending .res-state {
animation: res-pulse 900ms ease-in-out infinite;
}
body.no-anim .res-row.is-pending .res-state {
animation: none;
}
@keyframes res-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.note-empty {
display: flex;
align-items: center;
justify-content: center;
height: 5.37vh;
border: 1px dashed rgba(255, 255, 255, 0.09);
border-radius: 1.019vh;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: rgba(255, 255, 255, 0.34);
}
.history-entry {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.648vh;
flex: 1 1 0;
min-width: 0;
height: 6.204vh;
padding: 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 1.389vh;
background: var(--raise);
}
.history-entry b {
flex-shrink: 0;
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-entry span {
flex-shrink: 0;
font-size: 1.111vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
}
.history-row {
display: flex;
gap: 0.926vh;
}
.kv {
display: flex;
flex-direction: column;
gap: 1.296vh;
}
.kv div {
display: flex;
align-items: center;
gap: 1.574vh;
}
.kv span {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
}
.kv i {
flex: 1 1 auto;
min-width: 0;
height: 0;
border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.kv b {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.action-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.926vh;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 1.296vh;
border: 1px solid var(--line-soft);
border-radius: 1.019vh;
background: var(--raise);
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
transition: border-color 180ms var(--ease);
}
.action-btn.is-disabled {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.03);
color: var(--text-4);
pointer-events: none;
}
.action-btn.is-danger {
color: #e8484b;
}
.action-btn:hover {
border-color: rgba(255, 255, 255, 0.12);
}
.action-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.glyph-lg img.is-plain,
.glyph-sm img.is-plain {
width: 1.481vh;
height: 1.481vh;
}
.prow .row-body {
gap: 0.37vh;
flex-shrink: 0;
}
.prow .row-meta span {
flex-shrink: 0;
}
.stat-box.is-sm {
height: 5.093vh;
justify-content: center;
}
.map {
position: relative;
cursor: grab;
user-select: none;
flex: 1 1 auto;
min-height: 0;
border-radius: 1.019vh;
background: #0d0d0d;
overflow: hidden;
}
.map.is-dragging {
cursor: grabbing;
}
.map.is-dragging .map-canvas {
transition: none;
}
.map-canvas {
position: absolute;
left: -20vh;
top: -109.167vh;
width: 118.333vh;
height: 175.278vh;
transform-origin: center center;
transition: transform 240ms var(--ease);
}
.map-img {
width: 118.333vh;
height: 175.278vh;
pointer-events: none;
}
.blips {
position: absolute;
inset: 0;
}
.blip {
position: absolute;
display: block;
width: 1.111vh;
height: 1.111vh;
margin-left: -0.556vh;
margin-top: -0.556vh;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 0.111vh rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.blip.tone-self {
color: #ffffff;
}
.blip.tone-alive {
color: #42cc90;
}
.blip.tone-dead {
color: #e26a63;
}
.blip.has-avatar {
background: none;
overflow: hidden;
box-shadow: 0 0 0 0.111vh currentColor, 0 0 0 0.222vh rgba(0, 0, 0, 0.6);
}
.blip.has-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.map-zoom {
position: absolute;
right: 1.389vh;
bottom: 1.389vh;
display: flex;
flex-direction: column;
gap: 0.741vh;
}
.map-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2.963vh;
height: 2.685vh;
border-radius: 0.926vh;
background: #232323;
transition: background-color 180ms var(--ease);
}
.map-btn:hover {
background: #2e2e2e;
}
.map-btn:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.map-btn img {
width: 1.667vh;
height: 1.667vh;
}
.map-side {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex-shrink: 0;
width: 27.778vh;
min-height: 0;
}
.map-side[hidden] {
display: none;
}
.list-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.926vh;
flex-shrink: 0;
height: 1.574vh;
}
.list-head-main {
display: flex;
align-items: center;
gap: 0.926vh;
}
.list-head-main p {
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
white-space: nowrap;
}
.map-side .prow-id {
width: auto;
flex: 1 1 auto;
min-width: 0;
}
.menu {
position: absolute;
display: flex;
flex-direction: column;
gap: 0.37vh;
padding: 0.741vh;
border: 1px solid var(--card-line);
border-radius: 1.389vh;
background: var(--card);
}
.menu[hidden] {
display: none;
}
.menu-item,
.menu-row {
display: flex;
align-items: center;
gap: 0.926vh;
padding: 0.926vh 1.019vh;
border-radius: 1.019vh;
transition: background-color 180ms var(--ease);
}
.menu-item:hover,
.menu-row:hover {
background: rgba(255, 255, 255, 0.05);
}
.menu-row:focus-visible,
.menu-item:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.menu-item svg {
flex-shrink: 0;
width: 1.481vh;
height: 1.481vh;
color: var(--text-2);
}
.menu-item:hover svg {
color: var(--text);
}
.menu-head {
display: flex;
flex-direction: column;
gap: 0.185vh;
padding: 0.741vh 1.019vh;
border-bottom: 1px solid var(--line);
margin-bottom: 0.37vh;
}
.menu-head b {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
}
.menu-head span {
font-size: 0.926vh;
line-height: 1.2;
color: var(--text-3);
}
.menu-search {
width: 18.5vh;
margin-bottom: 0.37vh;
}
.menu .chips {
padding: 0.37vh 1.019vh 0.185vh;
}
.menu-body {
display: flex;
flex-direction: column;
gap: 0.185vh;
min-width: 0;
}
.menu-body b {
flex-shrink: 0;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
}
.menu-body span {
flex-shrink: 0;
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
}
.sheet {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(6, 6, 6, 0.62);
}
.sheet[hidden] {
display: none;
}
.sheet-card {
display: flex;
flex-direction: column;
gap: 1.852vh;
width: 38.889vh;
padding: 1.852vh;
border: 1px solid var(--card-line);
border-radius: 1.574vh;
background: var(--card);
}
.sheet-head {
display: flex;
align-items: center;
gap: 0.926vh;
flex-shrink: 0;
}
.sheet-glyph {
color: var(--text-2);
}
.sheet-glyph svg {
width: 1.481vh;
height: 1.481vh;
}
.field-row {
display: flex;
align-items: center;
gap: 0.648vh;
}
.field {
flex: 1 1 auto;
min-width: 0;
height: 3.241vh;
padding: 0 1.204vh;
border: 1px solid var(--line-soft);
border-radius: 0.926vh;
background: var(--row);
font-family: inherit;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
outline: none;
transition: border-color 180ms var(--ease);
}
.field-area {
height: auto;
min-height: 6.019vh;
padding: 0.926vh 1.204vh;
font-weight: 400;
line-height: 1.45;
resize: none;
}
.btn.is-plain {
background: rgba(255, 255, 255, 0.05);
color: var(--text-2);
}
.note-empty.has-note {
align-items: flex-start;
justify-content: flex-start;
height: auto;
min-height: 5.37vh;
padding: 1.204vh;
border-style: solid;
border-color: var(--line-soft);
background: var(--row);
font-weight: 400;
line-height: 1.45;
color: var(--text-2);
text-align: left;
}
.field::placeholder {
font-weight: 400;
color: var(--text-4);
}
.field:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.field:focus {
border-color: rgba(var(--brand-rgb), 0.4);
}
.field-row .field {
flex: 0 0 auto;
width: 6.481vh;
text-align: center;
}
.field-row .chips {
flex: 1 1 auto;
min-width: 0;
}
.sheet-actions {
display: flex;
justify-content: flex-end;
gap: 0.648vh;
flex-shrink: 0;
}
.sheet-actions .btn {
height: 3.241vh;
padding: 0 1.759vh;
}
.head-actions {
display: flex;
align-items: center;
gap: 0.463vh;
}
.stat-box.is-record {
cursor: pointer;
transition: border-color 180ms var(--ease);
}
.stat-box.is-record:hover {
border-color: rgba(255, 255, 255, 0.14);
}
.stat-box.is-record:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.menu-title {
padding: 0.463vh 1.019vh 0.185vh;
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.139vh;
text-transform: uppercase;
color: var(--text-4);
}
.menu-empty {
padding: 0.926vh 1.019vh;
font-size: 1.111vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-4);
white-space: nowrap;
}
.record {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.389vh;
padding: 0.741vh 1.019vh;
border-radius: 1.019vh;
transition: background-color 180ms var(--ease);
}
.record:hover {
background: rgba(255, 255, 255, 0.04);
}
.record-body {
display: flex;
flex-direction: column;
gap: 0.37vh;
min-width: 0;
}
.record-body b {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
}
.icon-btn {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.222vh;
height: 2.222vh;
border-radius: 0.556vh;
color: var(--text-4);
transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.icon-btn:hover {
background: rgba(232, 72, 75, 0.12);
color: #e8484b;
}
.icon-btn svg {
width: 1.296vh;
height: 1.296vh;
}
.chip-count {
justify-content: space-between;
gap: 0.926vh;
padding: 0 0.556vh 0 1.019vh;
}
.count {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.5vh;
height: 1.574vh;
border-radius: 0.37vh;
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
}
.count.tone-open {
background: rgba(229, 141, 53, 0.11);
color: var(--open);
}
.count.tone-claimed {
background: rgba(var(--brand-rgb), 0.11);
color: var(--brand);
}
.count.tone-closed {
background: rgba(66, 204, 144, 0.11);
color: var(--ok);
}
.rrow {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.389vh;
flex-shrink: 0;
min-height: 6.852vh;
padding: 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 1.574vh;
background: var(--row);
cursor: pointer;
transition: border-color 180ms var(--ease);
}
.rrow.is-static {
cursor: default;
padding: 1.204vh 1.389vh;
}
.rrow:not(.is-static):hover {
border-color: rgba(255, 255, 255, 0.1);
}
.rrow-edge {
position: absolute;
left: -1px;
top: -1px;
width: 3.796vh;
height: calc(100% + 2px);
border-left: 2px solid transparent;
border-radius: 1.574vh;
pointer-events: none;
}
.rrow.tone-open .rrow-edge {
border-left-color: var(--open);
}
.rrow.tone-claimed .rrow-edge {
border-left-color: var(--brand);
}
.rrow.tone-closed .rrow-edge {
border-left-color: var(--ok);
}
.rrow.tone-open.is-selected {
background: linear-gradient(90deg, rgba(229, 141, 53, 0.14) 0%, rgba(229, 141, 53, 0) 100%);
}
.rrow.tone-claimed.is-selected {
background: linear-gradient(90deg, rgba(var(--brand-rgb), 0.14) 0%, rgba(var(--brand-rgb), 0) 100%);
}
.rrow.tone-closed.is-selected {
background: linear-gradient(90deg, rgba(66, 204, 144, 0.14) 0%, rgba(66, 204, 144, 0) 100%);
}
.rrow-main {
display: flex;
align-items: center;
gap: 0.926vh;
min-width: 0;
}
.rrow-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.37vh;
min-width: 0;
}
.rrow-title {
flex-shrink: 0;
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rrow-id {
margin-left: 0.556vh;
font-size: 1.111vh;
font-weight: 400;
color: var(--text-4);
}
.rrow-text {
flex-shrink: 0;
font-size: 1.111vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
overflow: hidden;
text-overflow: ellipsis;
}
.rrow-note .rrow-meta {
justify-content: flex-start;
}
.rrow-note {
display: flex;
flex-direction: column;
gap: 1.019vh;
flex: 1 1 auto;
min-width: 0;
}
.rrow-meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.833vh;
flex-shrink: 0;
}
.tag-status {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 3.889vh;
height: 1.852vh;
padding: 0 0.741vh;
white-space: nowrap;
border-radius: 1.111vh;
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
}
.tag-status.tone-open {
background: rgba(229, 141, 53, 0.11);
color: var(--open);
}
.tag-status.tone-claimed {
background: rgba(var(--brand-rgb), 0.11);
color: var(--brand);
}
.tag-status.tone-closed {
background: rgba(66, 204, 144, 0.11);
color: var(--ok);
}
.badge-time {
width: 3.889vh;
height: 1.852vh;
border-radius: 1.852vh;
}
.avatar-xl {
width: 3.889vh;
height: 3.889vh;
border-radius: 0.889vh;
}
.avatar-xl img {
width: 3.889vh;
height: 3.889vh;
}
.person {
display: flex;
align-self: stretch;
cursor: pointer;
transition: border-color 180ms var(--ease);
align-items: center;
justify-content: space-between;
gap: 1.204vh;
height: 6.852vh;
padding: 1.204vh 1.759vh 1.204vh 1.204vh;
border: 1px solid var(--line);
border-radius: 1.389vh;
background-image: var(--sheen-soft), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
}
.person:hover {
border-color: rgba(255, 255, 255, 0.24);
}
.person:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.person-main {
display: flex;
align-items: center;
gap: 0.926vh;
min-width: 0;
}
.person .btn {
padding: 0 1.019vh;
cursor: default;
}
.action-grid.is-two {
grid-template-columns: repeat(2, 1fr);
}
.card-logs {
gap: 2.037vh;
padding: 1.481vh;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 0.926vh;
flex-shrink: 0;
}
.filter-row {
display: flex;
gap: 0.833vh;
}
.filter-row .chip {
flex: 1 1 0;
min-width: 0;
padding: 0 0.926vh;
}
.filter-row.is-wrap {
flex-wrap: wrap;
}
.filter-row.is-wrap .chip {
flex: 0 0 auto;
padding: 0 1.389vh;
}
.search {
display: flex;
align-items: center;
gap: 0.926vh;
flex-shrink: 0;
height: 4.167vh;
padding: 0 1.389vh;
border: 1px solid rgba(37, 37, 37, 0.48);
border-radius: 1.019vh;
background: #0d0d0d;
cursor: text;
}
.search-ico {
flex-shrink: 0;
width: 1.389vh;
height: 1.389vh;
}
.search-input {
flex: 1 1 auto;
min-width: 0;
border: 0;
padding: 0;
background: none;
outline: none;
font-family: inherit;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.25);
}
.table {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
border-radius: 1.574vh;
background: rgba(255, 255, 255, 0.02);
overflow: hidden;
}
.thead {
display: flex;
align-items: center;
flex-shrink: 0;
height: 5.185vh;
padding: 0 2.037vh;
background: rgba(255, 255, 255, 0.02);
}
.thead .lcell {
display: flex;
align-items: center;
line-height: 1.2;
font-size: 0.926vh;
font-weight: 600;
letter-spacing: 0.139vh;
color: var(--text-4);
}
.tbody {
display: flex;
flex-direction: column;
gap: 1.759vh;
flex: 1 1 auto;
min-height: 0;
padding: 1.759vh 0 9.259vh;
overflow-y: auto;
}
.lsep {
flex-shrink: 0;
height: 0.093vh;
background: var(--line-soft);
}
.lrow {
display: flex;
align-items: center;
flex-shrink: 0;
height: 2.407vh;
padding: 0 2.037vh;
cursor: pointer;
transition: background-color 180ms var(--ease);
}
.lrow:hover {
background: rgba(255, 255, 255, 0.02);
}
.lrow.is-selected {
background: rgba(var(--brand-rgb), 0.06);
}
.lcell {
display: flex;
align-items: center;
flex-shrink: 0;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
}
.lcell-time {
width: 12.685vh;
}
.lcell-cat {
width: 15.741vh;
}
.lcell-actor {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
display: block;
text-overflow: ellipsis;
line-height: 2.407vh;
}
.lcell-detail {
padding-left: 1.852vh;
justify-content: flex-end;
}
.table-fade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 9.259vh;
background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, var(--card) 100%);
pointer-events: none;
}
.tag-log {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 7.407vh;
height: 2.407vh;
padding: 0 0.556vh;
border-radius: 1.111vh;
background: rgba(255, 255, 255, 0.05);
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
white-space: nowrap;
}
.tag-log.tone-connection {
background: rgba(var(--brand-rgb), 0.11);
color: var(--brand);
}
.tag-log.tone-chat {
background: rgba(255, 255, 255, 0.05);
color: var(--text-2);
}
.tag-log.tone-command {
background: rgba(66, 204, 144, 0.11);
color: var(--ok);
}
.tag-log.tone-economy {
background: rgba(66, 204, 144, 0.11);
color: var(--ok);
}
.tag-log.tone-moderation {
background: rgba(229, 141, 53, 0.11);
color: var(--open);
}
.tag-log.tone-death {
background: rgba(244, 65, 68, 0.11);
color: var(--danger);
}
.tag-log.tone-vehicle {
background: rgba(224, 164, 88, 0.11);
color: var(--warn);
}
.tag-log.tone-resource {
background: rgba(229, 141, 53, 0.11);
color: var(--open);
}
.tag-log.tone-name {
min-width: 7.593vh;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.63);
}
.drawer-narrow {
width: 27.037vh;
}
.stack-wide {
gap: 0.926vh;
min-width: 0;
}
.log-card {
position: relative;
display: flex;
flex-direction: column;
gap: 1.296vh;
flex-shrink: 0;
height: 6.852vh;
padding: 0.926vh 1.296vh 0.926vh 1.111vh;
border: 1px solid var(--line-soft);
border-left: 2px solid var(--brand);
border-radius: 1.574vh;
background: var(--row);
}
.log-card.tone-command,
.log-card.tone-economy {
border-left-color: var(--ok);
}
.log-card.tone-moderation {
border-left-color: var(--open);
}
.log-card.tone-death {
border-left-color: var(--danger);
}
.log-card.tone-vehicle {
border-left-color: var(--warn);
}
.log-card.tone-resource {
border-left-color: var(--open);
}
.log-card.tone-chat {
border-left-color: var(--text-4);
}
.log-card-tags {
display: flex;
align-items: center;
gap: 0.648vh;
min-width: 0;
}
.log-card .tag-log {
border-radius: 0.833vh;
min-width: 0;
max-width: 12.037vh;
overflow: hidden;
}
.row-meta.is-mid span {
font-size: 1.111vh;
}
.info-list {
display: flex;
flex-direction: column;
gap: 1.296vh;
}
.info-row {
display: flex;
align-items: center;
gap: 1.574vh;
}
.info-row span {
flex-shrink: 0;
font-size: 1.111vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
}
.info-row i {
flex: 1 1 auto;
min-width: 1.389vh;
height: 0;
border-top: 1px solid var(--line-soft);
}
.info-row b {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
}
.people-list {
display: flex;
flex-direction: column;
gap: 0.926vh;
flex-shrink: 0;
}
.drawer-card.is-action {
width: 100%;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: border-color 180ms var(--ease);
}
.drawer-card.is-action:hover {
border-color: rgba(255, 255, 255, 0.12);
}
.drawer-card .tag-brand {
margin-left: auto;
}
.drawer-card.is-action:focus-visible {
outline: 1px solid var(--brand);
outline-offset: 0.185vh;
}
.info-row.is-stacked {
flex-direction: column;
align-items: flex-start;
gap: 0.556vh;
}
.info-row.is-stacked b {
align-self: stretch;
white-space: normal;
overflow-wrap: anywhere;
}
.tag-brand {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: 2.685vh;
padding: 0 1.019vh;
border-radius: 0.926vh;
background: rgba(var(--brand-rgb), 0.11);
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--brand);
white-space: nowrap;
}
.tag-brand.tone-killer {
background: rgba(244, 65, 68, 0.11);
color: var(--danger);
}
.tag-brand.tone-victim {
background: rgba(255, 255, 255, 0.05);
color: var(--text-2);
}
.payload {
margin: 0;
max-height: 14.259vh;
padding: 1.389vh;
border: 1px solid var(--card-line);
border-radius: 1.574vh;
background: #0c0c0c;
font-family: inherit;
font-size: 1.111vh;
font-weight: 400;
line-height: 1.45;
color: var(--text-3);
white-space: pre-wrap;
word-break: break-word;
overflow-y: auto;
}
.card-bans {
gap: 1.389vh;
padding: 1.481vh;
}
.toolbar-count.is-strong {
font-size: 1.296vh;
}
.bhead {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 1.481vh;
}
.bhead .bcol {
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.139vh;
color: var(--text-4);
white-space: nowrap;
}
.bcol {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
}
.bcol-player {
flex: 0 0 14.259vh;
justify-content: flex-start;
}
.bcol-action {
flex: 0 0 6.296vh;
justify-content: flex-end;
}
.brow {
display: flex;
align-items: center;
flex-shrink: 0;
height: 5.648vh;
padding: 0 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 1.574vh;
background: var(--row);
cursor: pointer;
transition: border-color 180ms var(--ease);
}
.brow:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.brow.is-selected {
border-color: rgba(var(--brand-rgb), 0.61);
background-image: linear-gradient(90deg, rgba(var(--brand-rgb), 0.15) 0%, rgba(var(--brand-rgb), 0.03) 100%);
}
.bplayer {
display: flex;
align-items: center;
gap: 1.019vh;
flex: 0 0 14.259vh;
min-width: 0;
}
.bcell {
min-width: 0;
font-size: 1.296vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tag-log.tone-perm {
background: rgba(var(--brand-rgb), 0.11);
color: var(--brand);
}
.tag-log.tone-temp {
background: rgba(224, 164, 88, 0.11);
color: var(--warn);
}
.tag-log.tone-expired {
background: rgba(255, 255, 255, 0.05);
color: var(--text-2);
}
.stats {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.stats > * {
flex: 0 0 auto;
}
.stat-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.389vh;
}
.stat-boxes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.926vh;
}
.stat-kpi {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 8.796vh;
padding: 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 1.574vh;
background: var(--raise);
}
.stat-kpi-value {
font-size: 1.852vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
}
.stat-card {
flex: 0 0 auto;
gap: 1.019vh;
overflow: hidden;
}
.stat-card.is-timeline {
height: 14.537vh;
}
.stat-card.is-economy {
height: 12.905vh;
}
.stat-card.is-vehicles {
height: 34.259vh;
}
.head-badge {
margin-left: auto;
}
.chart {
flex: 1 1 auto;
min-height: 0;
}
.chart-svg {
display: block;
width: 100%;
height: 100%;
}
.stat-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.389vh;
height: 23.426vh;
}
.stat-cols.is-two {
grid-template-columns: repeat(2, 1fr);
height: 30.463vh;
}
.stat-cols > .card {
min-width: 0;
}
.bar-list {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.bar-row {
display: flex;
align-items: center;
gap: 1.389vh;
flex-shrink: 0;
height: 2.253vh;
}
.bar-label {
flex-shrink: 0;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bar-who {
display: flex;
align-items: center;
gap: 0.741vh;
flex: 0 0 9.907vh;
min-width: 0;
}
.bar-who .avatar,
.bar-who .avatar img {
width: 2.253vh;
height: 2.253vh;
}
.bar-name {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bar-track {
position: relative;
flex: 1 1 auto;
min-width: 0;
height: 0.556vh;
border-radius: 1.667vh;
background: var(--track);
overflow: hidden;
}
.bar-track i {
position: absolute;
inset: 0;
border-radius: 1.667vh;
transform: scaleX(0);
transform-origin: left center;
transition: transform 420ms var(--ease);
}
.bar-track i.tone-brand {
background: var(--brand);
}
.bar-track i.tone-ok {
background: var(--ok);
}
.bar-track i.tone-danger {
background: var(--danger);
}
.badge-pill {
width: auto;
min-width: 3.889vh;
height: 1.852vh;
padding: 0 0.648vh;
border-radius: 1.852vh;
}
.stat-rows {
display: flex;
flex-direction: column;
gap: 0.926vh;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.brow.is-static {
cursor: default;
}
.brow.is-static:hover {
border-color: var(--line-soft);
}
.brow.is-vehicle {
height: 6.418vh;
}
.bmodel {
display: flex;
align-items: center;
gap: 0.926vh;
flex: 0 0 12.87vh;
min-width: 0;
}
.bcol-model {
flex: 0 0 12.87vh;
justify-content: flex-start;
}
.bcol-state {
flex: 0 0 6.759vh;
justify-content: flex-end;
}
.bplayer.is-inline {
flex: 0 0 auto;
}
.veh-art {
position: relative;
flex-shrink: 0;
width: 5.785vh;
height: 3.456vh;
border-radius: 0.648vh;
overflow: hidden;
}
.veh-art img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 5.785vh;
height: 3.456vh;
max-width: none;
object-fit: contain;
}
.card-staff {
gap: 1.389vh;
padding: 1.481vh;
overflow-y: auto;
}
.card-staff .rows {
flex: 0 0 auto;
overflow-y: visible;
}
.card-staff .card-fade {
display: none;
}
.srow {
justify-content: space-between;
cursor: pointer;
}
.srow .bplayer {
flex: 0 0 auto;
}
.pill-group {
display: flex;
align-items: center;
gap: 0.648vh;
flex-shrink: 0;
}
.pill.tone-muted {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
color: var(--text-4);
}
.pill.tone-muted i {
background: rgba(255, 255, 255, 0.35);
}
.srow.is-selected {
border-color: rgba(var(--brand-rgb), 0.61);
background-image: linear-gradient(90deg, rgba(var(--brand-rgb), 0.15) 0%, rgba(var(--brand-rgb), 0.03) 100%);
}
.vpage {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.vpage > * {
flex: 0 0 auto;
}
.vsplit {
display: flex;
gap: 1.389vh;
height: 54vh;
}
.card-vehicles {
flex: 1 1 auto;
min-width: 0;
gap: 1.389vh;
padding: 1.481vh;
}
.card-spawn {
flex: 0 0 40.833vh;
gap: 1.667vh;
padding: 1.481vh;
overflow-y: auto;
}
.card-spawn #spawnActions {
margin-top: auto;
}
.card-nearby {
height: 48.056vh;
gap: 1.389vh;
padding: 1.481vh;
}
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.389vh;
flex-shrink: 0;
height: 3.056vh;
}
.panel-head .stack {
gap: 0.37vh;
}
.vgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.389vh;
align-content: start;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.vcard {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
justify-content: center;
gap: 0.926vh;
height: 11.852vh;
padding: 1.389vh;
border: 1px solid var(--line-soft);
border-radius: 1.574vh;
background: var(--row);
cursor: pointer;
transition: border-color 180ms var(--ease);
}
.vcard:hover {
border-color: rgba(255, 255, 255, 0.12);
}
.vcard.is-selected {
border-color: rgba(var(--brand-rgb), 0.61);
background-image: linear-gradient(90deg, rgba(var(--brand-rgb), 0.15) 0%, rgba(var(--brand-rgb), 0.03) 100%);
}
.vcard-art {
position: relative;
flex-shrink: 0;
align-self: stretch;
height: 5.185vh;
overflow: hidden;
}
.vcard-art img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 9.444vh;
height: 5.185vh;
max-width: none;
object-fit: contain;
}
.vcard-body {
display: flex;
flex-direction: column;
gap: 0.37vh;
align-self: stretch;
min-width: 0;
}
.vcard-body b {
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vcard-body span {
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vpreview {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 1 10.185vh;
height: 10.185vh;
min-height: 0;
overflow: hidden;
}
.vpreview img {
width: 18.519vh;
height: 10.185vh;
max-width: none;
object-fit: contain;
}
.field-row-two {
display: flex;
gap: 1.852vh;
flex-shrink: 0;
}
.field-block {
display: flex;
flex-direction: column;
gap: 0.741vh;
flex: 1 1 0;
min-width: 0;
}
.field-block > span {
font-size: 1.111vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
}
.field-input {
height: 4.167vh;
padding: 0 1.389vh;
border: 1px solid rgba(37, 37, 37, 0.48);
border-radius: 1.019vh;
background: #0d0d0d;
}
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.389vh;
flex-shrink: 0;
}
.toggle-title {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
}
.toggle-sub {
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
}
.switch {
position: relative;
flex-shrink: 0;
width: 2.963vh;
height: 1.694vh;
border-radius: 1.694vh;
background: rgba(255, 255, 255, 0.12);
cursor: pointer;
transition: background-color 180ms var(--ease);
}
.switch i {
position: absolute;
left: 0.185vh;
top: 0.185vh;
width: 1.324vh;
height: 1.324vh;
border-radius: 50%;
background: #ffffff;
transition: transform 180ms var(--ease);
}
.switch.is-on {
background: var(--brand);
}
.switch.is-on i {
transform: translateX(1.269vh);
}
.vnearby {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.389vh;
align-content: start;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.vehicle-tail {
display: flex;
align-items: center;
gap: 2.037vh;
flex-shrink: 0;
}
.pill-btn.is-plain {
border-color: var(--line-soft);
background: var(--raise);
color: var(--text);
}
.pill-btn.is-plain:hover {
border-color: rgba(255, 255, 255, 0.12);
}
.spage {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.spage > * {
flex: 0 0 auto;
}
.scard {
flex: 0 0 auto;
gap: 1.389vh;
padding: 1.481vh;
}
.spane-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.389vh;
}
.spane-row > .card {
min-width: 0;
}
.sgrid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.926vh;
}
.clock {
display: flex;
flex-direction: column;
gap: 0.926vh;
flex-shrink: 0;
}
.clock-track {
position: relative;
display: block;
height: 0.556vh;
border-radius: 1.667vh;
background: var(--track);
cursor: pointer;
}
.clock-fill {
position: absolute;
left: 0;
right: 0;
top: 1.019vh;
bottom: 1.019vh;
border-radius: 1.667vh;
background: var(--brand);
transform: scaleX(0.5);
transform-origin: left center;
}
.clock-knob {
position: absolute;
left: 0;
top: 50%;
width: 1.296vh;
height: 1.296vh;
margin-top: -0.648vh;
margin-left: -0.648vh;
border-radius: 50%;
background: #ffffff;
}
.clock-ticks {
display: flex;
justify-content: space-between;
}
.clock-ticks span {
font-size: 0.926vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-4);
}
.clock-ticks span.is-now {
color: var(--text);
}
.action-btn.is-active {
border-color: rgba(var(--brand-rgb), 0.61);
background-image: linear-gradient(90deg, rgba(var(--brand-rgb), 0.15) 0%, rgba(var(--brand-rgb), 0.03) 100%);
color: var(--brand);
}
.console {
display: flex;
flex-direction: column;
gap: 0.463vh;
flex: 1 1 auto;
min-height: 0;
padding: 1.296vh;
border: 1px solid var(--line-soft);
border-radius: 1.389vh;
background: #0c0c0c;
overflow-y: auto;
}
.cline {
display: flex;
gap: 1.019vh;
flex-shrink: 0;
font-size: 1.111vh;
font-weight: 400;
line-height: 1.35;
color: var(--text-3);
word-break: break-word;
}
.cline span {
flex-shrink: 0;
color: var(--text-4);
}
.cline.tone-danger {
color: var(--danger);
}
.cline.tone-warn {
color: var(--warn);
}
.cmdbar {
display: flex;
align-items: center;
gap: 0.926vh;
flex-shrink: 0;
height: 4.167vh;
padding: 0 0.741vh 0 1.389vh;
border: 1px solid rgba(37, 37, 37, 0.48);
border-radius: 1.019vh;
background: #0d0d0d;
cursor: text;
}
.cmd-caret {
flex-shrink: 0;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--brand);
}
.btn.is-brand {
background: var(--brand);
color: #ffffff;
}
.btn.is-brand:hover {
background: #34baff;
}
.res-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.389vh;
align-content: start;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.res-row {
display: flex;
align-items: center;
gap: 1.204vh;
min-width: 0;
padding: 1.204vh 1.759vh;
border: 1px solid var(--line);
border-radius: 1.389vh;
background-image: var(--sheen-soft), linear-gradient(90deg, var(--chip) 0%, var(--chip) 100%);
}
.res-state {
flex-shrink: 0;
width: 0.37vh;
height: 2.685vh;
border-radius: 0.37vh;
background: var(--danger);
}
.res-state.is-on {
background: var(--ok);
}
.res-body {
display: flex;
flex-direction: column;
gap: 0.37vh;
flex: 1 1 auto;
min-width: 0;
}
.res-body b {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.res-body span {
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-3);
white-space: nowrap;
}
.set-list {
display: flex;
flex-direction: column;
gap: 1.667vh;
flex-shrink: 0;
}
.set-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.852vh;
min-width: 0;
}
.set-row .stack {
flex-shrink: 0;
}
.set-row .set-chips {
flex: 1 1 auto;
min-width: 0;
}
.swatches {
display: flex;
align-items: center;
gap: 1.019vh;
flex-shrink: 0;
}
.swatch {
flex-shrink: 0;
width: 1.481vh;
height: 1.481vh;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.25);
cursor: pointer;
transition: box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.swatch:hover {
transform: scale(1.12);
}
.swatch.is-active {
box-shadow: 0 0 0 0.185vh rgba(255, 255, 255, 0.85);
}
body.dim-none { --backdrop: rgba(6, 6, 6, 0); }
body.dim-light { --backdrop: rgba(6, 6, 6, 0.45); }
body.dim-normal { --backdrop: rgba(6, 6, 6, 0.72); }
body.dim-heavy { --backdrop: rgba(6, 6, 6, 0.92); }
body.no-anim * {
transition: none !important;
}
.subnav {
display: flex;
gap: 0.648vh;
flex-shrink: 0;
}
.spane {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.spane[hidden] {
display: none;
}
.spane > * {
flex: 0 0 auto;
}
.scard.is-fill {
height: auto;
flex: 1 1 auto;
min-height: 0;
}
.action-btn.is-brand {
border-color: rgba(var(--brand-rgb), 0.4);
background-image: linear-gradient(180deg, rgba(var(--brand-rgb), 0.28) 0%, rgba(var(--brand-rgb), 0.12) 100%);
color: var(--text);
}
.shot {
position: fixed;
inset: 0;
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
padding: 3.704vh;
background: rgba(6, 6, 6, 0.86);
}
.shot[hidden] {
display: none;
}
.shot-card {
display: flex;
flex-direction: column;
gap: 1.389vh;
width: 100%;
height: 100%;
min-height: 0;
padding: 1.481vh;
border: 1px solid var(--card-line);
border-radius: 1.574vh;
background: var(--card);
}
.shot-frame {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
min-height: 0;
border-radius: 1.019vh;
background: #0b0b0b;
overflow: hidden;
}
.shot-frame img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.res-list.is-single {
grid-template-columns: 1fr;
max-height: 13.889vh;
}
.res-list.is-wide {
grid-template-columns: repeat(3, 1fr);
}
body .panel { zoom: var(--ui-scale, 1); }
.shot-live {
margin-left: auto;
margin-right: 0.926vh;
}
.clock-track {
height: 2.593vh;
padding: 1.019vh 0;
margin: -1.019vh 0;
background-clip: content-box;
}
.clock-knob {
width: 1.667vh;
height: 1.667vh;
margin-top: -0.833vh;
margin-left: -0.833vh;
box-shadow: 0 0 0 0.37vh rgba(0, 0, 0, 0.45);
transition: transform 120ms var(--ease);
}
.clock-track.is-dragging .clock-knob,
.clock-track:hover .clock-knob {
box-shadow: 0 0 0 0.37vh rgba(var(--brand-rgb), 0.3);
}
.clock-track.is-dragging .clock-knob {
transition: none;
}
.announce {
position: fixed;
left: 0;
right: 0;
top: 3.704vh;
z-index: 3;
display: flex;
justify-content: center;
pointer-events: none;
}
.announce[hidden] {
display: none;
}
.announce-card {
position: relative;
display: flex;
align-items: center;
gap: 1.389vh;
min-width: 37.037vh;
max-width: 92.593vh;
padding: 1.481vh 2.222vh 1.481vh 1.481vh;
border: 1px solid var(--card-line);
border-left: 3px solid var(--brand);
border-radius: 1.574vh;
background: var(--panel);
box-shadow: 0 1.852vh 3.704vh rgba(0, 0, 0, 0.55);
overflow: hidden;
animation: announce-in 320ms var(--ease);
}
@keyframes announce-in {
from {
opacity: 0;
transform: translateY(-1.852vh);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.announce-card.tone-warning {
border-left-color: var(--warn);
}
.announce-card.tone-error {
border-left-color: var(--danger);
}
.announce-card.tone-event {
border-left-color: var(--ok);
}
.announce-star {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.685vh;
height: 2.685vh;
border-radius: 0.703vh;
background: rgba(66, 204, 144, 0.14);
font-size: 1.481vh;
line-height: 1;
color: var(--ok);
}
.announce-card.tone-warning .announce-star {
background: rgba(224, 164, 88, 0.14);
color: var(--warn);
}
.announce-label {
font-size: 0.926vh;
font-weight: 600;
letter-spacing: 0.139vh;
line-height: 1.2;
color: var(--text-4);
text-transform: uppercase;
}
.announce-text {
font-size: 1.296vh;
font-weight: 600;
line-height: 1.35;
color: var(--text);
word-break: break-word;
}
.announce-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.185vh;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.announce-bar i {
display: block;
height: 0.185vh;
background: var(--brand);
transform-origin: left center;
transition-property: transform;
transition-timing-function: linear;
}
.announce-card.tone-event .announce-bar i {
background: var(--ok);
}
.map-hint {
position: absolute;
left: 1.296vh;
right: 1.296vh;
top: 1.296vh;
z-index: 4;
display: none;
padding: 0.926vh 1.204vh;
border-radius: 0.741vh;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(18, 18, 18, 0.92);
color: #d8d8d8;
font-size: 1.204vh;
line-height: 1.6vh;
letter-spacing: 0.01em;
}
.map-hint.is-on {
display: block;
}
.map.is-calibrating {
cursor: crosshair;
}
.map.is-calibrating .map-canvas {
transition: none;
}
.heat {
position: absolute;
display: block;
width: 5.556vh;
height: 5.556vh;
margin-left: -2.778vh;
margin-top: -2.778vh;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(232, 84, 84, 0.85) 0%, rgba(232, 84, 84, 0.35) 45%, rgba(232, 84, 84, 0) 72%);
}
.ticketui {
position: fixed;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: var(--backdrop);
}
.ticketui[hidden] {
display: none;
}
.rep-card {
display: flex;
flex-direction: column;
gap: 1.481vh;
width: 46.296vh;
max-height: 83.333vh;
padding: 1.852vh;
border: 1px solid var(--card-line);
border-radius: 1.574vh;
background: var(--card);
box-shadow: 0 1.852vh 3.704vh rgba(0, 0, 0, 0.55);
}
.rep-body {
display: flex;
flex-direction: column;
gap: 1.389vh;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.rep-field {
display: flex;
flex-direction: column;
gap: 0.648vh;
}
.rep-label {
font-size: 0.926vh;
font-weight: 600;
letter-spacing: 0.139vh;
line-height: 1.2;
color: var(--text-4);
text-transform: uppercase;
}
.rep-message {
min-height: 8.333vh;
}
.rep-row {
display: flex;
gap: 0.648vh;
}
.rep-row .field {
flex: 0 0 auto;
width: 7.407vh;
text-align: center;
}
.rep-row .btn {
height: 3.241vh;
padding: 0 1.389vh;
}
.rep-tags {
display: flex;
flex-wrap: wrap;
gap: 0.463vh;
}
.rep-tag {
display: flex;
align-items: center;
gap: 0.556vh;
height: 2.685vh;
padding: 0 0.463vh 0 1.019vh;
border-radius: 0.926vh;
background: rgba(255, 255, 255, 0.05);
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
}
.rep-tag b {
padding: 0 0.556vh;
border-radius: 0.556vh;
background: rgba(var(--brand-rgb), 0.15);
font-size: 0.926vh;
color: var(--brand);
}
.rep-tag-x {
display: flex;
align-items: center;
justify-content: center;
width: 1.852vh;
height: 1.852vh;
border-radius: 0.463vh;
background: transparent;
cursor: pointer;
}
.rep-tag-x:hover {
background: rgba(255, 255, 255, 0.08);
}
.rep-tag-x img {
width: 0.926vh;
height: 0.926vh;
}
.rep-hint {
font-size: 1.019vh;
font-weight: 400;
line-height: 1.45;
color: var(--text-4);
}
.rep-picker {
display: flex;
flex-direction: column;
gap: 0.463vh;
padding: 0.926vh;
border: 1px solid var(--line-soft);
border-radius: 0.926vh;
background: var(--sunken);
}
.rep-near {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.926vh;
height: 3.241vh;
padding: 0 1.019vh;
border-radius: 0.741vh;
background: var(--row);
cursor: pointer;
text-align: left;
}
.rep-near:hover {
background: rgba(255, 255, 255, 0.07);
}
.rep-near-name {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
color: var(--text);
}
.rep-near-meta {
display: flex;
align-items: center;
gap: 0.556vh;
font-size: 1.019vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-4);
}
.rep-near-meta i {
width: 0.278vh;
height: 0.278vh;
border-radius: 50%;
background: var(--text-4);
}
.rep-toggle {
display: flex;
align-items: center;
gap: 0.926vh;
padding: 1.019vh 1.204vh;
border: 1px solid var(--line-soft);
border-radius: 0.926vh;
background: var(--row);
cursor: pointer;
text-align: left;
}
.rep-toggle:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.rep-check {
display: flex;
flex-shrink: 0;
width: 1.667vh;
height: 1.667vh;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 0.463vh;
}
.rep-toggle.is-on .rep-check {
border-color: var(--brand);
background: var(--brand);
}
.rep-toggle-title {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.3;
color: var(--text);
}
.rep-toggle-sub {
font-size: 1.019vh;
font-weight: 400;
line-height: 1.3;
color: var(--text-4);
}
.rep-error {
padding: 0.741vh 1.019vh;
border-radius: 0.741vh;
background: rgba(232, 84, 84, 0.12);
font-size: 1.019vh;
font-weight: 600;
line-height: 1.35;
color: var(--danger);
}
.rep-foot {
display: flex;
justify-content: flex-end;
gap: 0.648vh;
flex-shrink: 0;
}
.rep-foot .btn {
height: 3.241vh;
padding: 0 1.759vh;
}
.rep-summary {
display: flex;
flex-direction: column;
gap: 0.741vh;
padding: 1.204vh;
border: 1px solid var(--line-soft);
border-radius: 0.926vh;
background: var(--row);
}
.rep-summary-head {
display: flex;
align-items: center;
gap: 0.648vh;
}
.rep-claim {
font-size: 1.019vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-4);
}
.rep-summary-text {
font-size: 1.111vh;
font-weight: 400;
line-height: 1.45;
color: var(--text-2);
word-break: break-word;
}
.rep-summary-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.926vh;
}
.rep-summary-row span {
flex-shrink: 0;
font-size: 0.926vh;
font-weight: 600;
letter-spacing: 0.093vh;
line-height: 1.2;
color: var(--text-4);
text-transform: uppercase;
}
.rep-summary-row b {
font-size: 1.019vh;
font-weight: 600;
line-height: 1.3;
color: var(--text-2);
text-align: right;
word-break: break-word;
}
.rep-shot {
overflow: hidden;
border: 1px solid var(--line-soft);
border-radius: 0.926vh;
background: #0d0d0d;
}
.rep-shot img {
display: block;
width: 100%;
}
.rep-thread {
display: flex;
flex-direction: column;
gap: 0.741vh;
max-height: 27.778vh;
padding: 1.019vh;
border: 1px solid var(--line-soft);
border-radius: 0.926vh;
background: var(--sunken);
overflow-y: auto;
}
.rep-msg {
max-width: 78%;
padding: 0.741vh 1.019vh;
border-radius: 0.926vh;
background: var(--row);
}
.rep-msg.is-staff {
align-self: flex-start;
background: rgba(var(--brand-rgb), 0.12);
}
.rep-msg.is-player {
align-self: flex-end;
}
.rep-msg-who {
font-size: 0.926vh;
font-weight: 600;
letter-spacing: 0.093vh;
line-height: 1.2;
color: var(--text-4);
text-transform: uppercase;
}
.rep-msg-text {
font-size: 1.111vh;
font-weight: 400;
line-height: 1.4;
color: var(--text);
word-break: break-word;
}
.rep-msg-time {
font-size: 0.833vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-4);
text-align: right;
}
.rep-system {
align-self: center;
font-size: 0.926vh;
font-weight: 600;
letter-spacing: 0.093vh;
line-height: 1.2;
color: var(--text-4);
text-transform: uppercase;
}
.rep-compose {
display: flex;
gap: 0.648vh;
flex-shrink: 0;
}
.rep-compose .field {
flex: 1 1 auto;
}
.rep-compose .btn {
height: 3.241vh;
padding: 0 1.481vh;
}
.kpi.has-jobs {
position: relative;
}
.job-pop {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 5;
display: none;
flex-direction: column;
gap: 0.463vh;
margin-top: 0.556vh;
padding: 1.019vh;
border: 1px solid var(--card-line);
border-radius: 0.926vh;
background: var(--panel);
box-shadow: 0 1.111vh 2.222vh rgba(0, 0, 0, 0.5);
}
.kpi.has-jobs:hover .job-pop {
display: flex;
}
.job-title {
font-size: 0.926vh;
font-weight: 600;
letter-spacing: 0.139vh;
line-height: 1.2;
color: var(--text-4);
text-transform: uppercase;
}
.job-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.926vh;
height: 2.407vh;
padding: 0 0.741vh;
border-radius: 0.556vh;
background: var(--row);
}
.job-name {
font-size: 1.019vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
}
.job-count {
min-width: 1.852vh;
padding: 0 0.463vh;
border-radius: 0.463vh;
background: rgba(var(--brand-rgb), 0.15);
font-size: 1.019vh;
font-weight: 700;
line-height: 1.85vh;
color: var(--brand);
text-align: center;
}
.job-empty {
font-size: 1.019vh;
font-weight: 400;
line-height: 1.4;
color: var(--text-4);
}
.map-hint.is-on {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.019vh;
}
.map-hint-btn {
flex-shrink: 0;
height: 2.222vh;
padding: 0 0.926vh;
border-radius: 0.556vh;
background: rgba(255, 255, 255, 0.07);
font-size: 1.019vh;
font-weight: 600;
line-height: 1.2;
color: var(--text-2);
cursor: pointer;
}
.map-hint-btn:hover {
background: rgba(255, 255, 255, 0.12);
}
.tile.is-on {
border-color: rgba(var(--brand-rgb), 0.55);
background-image: linear-gradient(180deg, rgba(var(--brand-rgb), 0.22) 0%, rgba(var(--brand-rgb), 0.04) 100%);
}
.action-btn.is-on {
border-color: rgba(var(--brand-rgb), 0.55);
background-image: linear-gradient(180deg, rgba(var(--brand-rgb), 0.22) 0%, rgba(var(--brand-rgb), 0.04) 100%);
color: var(--brand);
}
.is-hidden {
display: none;
}
.permset {
display: flex;
flex-direction: column;
gap: 1.389vh;
padding: 1.389vh 0 0;
}
.permgroup {
display: flex;
flex-direction: column;
gap: 0.463vh;
}
.permhead,
.permrow {
display: grid;
grid-template-columns: 1fr repeat(4, 4.6vh);
align-items: center;
gap: 0.463vh;
}
.permhead span {
font-size: 0.833vh;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
color: var(--text-4);
}
.permrow {
padding: 0.463vh 0.833vh;
border: 1px solid var(--line-soft);
border-radius: 0.833vh;
background: var(--sunken);
}
.permname {
font-size: 0.926vh;
font-weight: 600;
color: var(--text-2);
}
.permcell {
justify-self: center;
width: 0.926vh;
height: 0.926vh;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.permcell.is-on {
background: var(--brand);
}
.tile-glyph {
color: var(--text-2);
}
.tile-glyph svg {
width: 1.25vh;
height: 1.25vh;
}
.tile.is-on .tile-glyph {
color: var(--brand);
}
.card-vinfo {
flex: 0 0 auto;
gap: 1.389vh;
padding: 1.481vh;
}
.nav-item[hidden],
.chip[hidden] {
display: none;
}
.nav-item.is-locked,
.chip.is-locked {
opacity: 0.3;
cursor: not-allowed;
}
.nav-item.is-locked:hover {
background-color: transparent;
}
.chip.is-locked:hover {
background: rgba(255, 255, 255, 0.05);
}
.nav-item.is-locked:hover .ico {
opacity: inherit;
}
.nav-item.is-locked .badge {
opacity: 0;
}
.btn.is-denied,
.pill-btn.is-denied,
.action-btn.is-denied,
.tile.is-denied {
opacity: 0.32;
pointer-events: none;
}
.drawer-section.is-muted {
opacity: 0.32;
pointer-events: none;
}
.lock-ico {
flex-shrink: 0;
width: 0.833vh;
height: 0.833vh;
margin-left: 0.463vh;
vertical-align: -0.093vh;
}
.tile.is-denied .tile-name {
display: flex;
align-items: center;
}
.stat-more {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.389vh;
flex-shrink: 0;
padding-top: 1.204vh;
}
.action-grid.is-one {
grid-template-columns: 1fr;
}
.vgrid-more {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.389vh;
padding: 0.463vh 0.463vh 0;
}
.stat-box.is-icon {
flex-direction: row;
align-items: center;
gap: 1.019vh;
}
.info-glyph {
color: var(--text-2);
}
.info-glyph svg {
width: 1.296vh;
height: 1.296vh;
}
.info-text {
display: flex;
flex-direction: column;
gap: 0.352vh;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.set-range {
display: flex;
align-items: center;
gap: 1.111vh;
flex: 1 1 auto;
min-width: 0;
max-width: 20vh;
}
.range {
appearance: none;
-webkit-appearance: none;
flex: 1 1 auto;
min-width: 0;
height: 0.556vh;
border-radius: 1.667vh;
background: var(--track);
cursor: pointer;
}
.range::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 1.481vh;
height: 1.481vh;
border: 0.185vh solid var(--panel);
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 0.093vh rgba(var(--brand-rgb), 0.5);
cursor: pointer;
}
.range-value {
flex-shrink: 0;
min-width: 4vh;
font-size: 1.111vh;
font-weight: 600;
line-height: 1.2;
text-align: right;
color: var(--text);
}
.update {
position: absolute;
right: 2.315vh;
bottom: 2.315vh;
z-index: 6;
width: 33vh;
}
.update[hidden] {
display: none;
}
.update-card {
display: flex;
flex-direction: column;
gap: 1.204vh;
padding: 1.481vh;
border: 1px solid rgba(244, 65, 68, 0.28);
border-radius: 1.574vh;
background: #141011;
box-shadow: 0 1.111vh 2.778vh rgba(0, 0, 0, 0.55);
}
.update-head {
display: flex;
align-items: center;
gap: 0.926vh;
}
.update-head .stack {
flex: 1 1 auto;
min-width: 0;
}
.update-glyph {
border-color: rgba(244, 65, 68, 0.3);
background-image: none;
background: rgba(244, 65, 68, 0.14);
color: var(--danger);
}
.update-glyph svg {
width: 1.204vh;
height: 1.204vh;
}
.update-notes {
display: flex;
flex-direction: column;
gap: 0.648vh;
max-height: 16vh;
overflow-y: auto;
}
.update-notes p {
display: flex;
align-items: flex-start;
gap: 0.741vh;
font-size: 1.019vh;
font-weight: 400;
line-height: 1.4;
color: var(--text-2);
}
.update-notes i {
flex-shrink: 0;
width: 0.37vh;
height: 0.37vh;
margin-top: 0.556vh;
border-radius: 50%;
background: var(--danger);
}
.update-foot {
font-size: 0.926vh;
font-weight: 400;
line-height: 1.2;
color: var(--text-4);
}
.ver-line {
display: inline-flex;
align-items: center;
gap: 0.741vh;
}
.ver-tag {
flex-shrink: 0;
padding: 0.093vh 0.648vh;
border-radius: 0.556vh;
font-size: 0.833vh;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.046vh;
text-transform: uppercase;
}
.ver-tag.tone-ok {
background: rgba(66, 204, 144, 0.14);
color: var(--ok);
}
.ver-tag.tone-bad {
background: rgba(244, 65, 68, 0.14);
color: var(--danger);
}
.rrow-meta .icon-btn {
width: 1.852vh;
height: 1.852vh;
}
.rrow-meta .icon-btn svg {
width: 1.204vh;
height: 1.204vh;
}
.rrow-meta .icon-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-2);
}
.icon-btn.is-on {
color: var(--warn);
}
.rrow-meta .icon-btn.is-on:hover {
color: var(--warn);
}
.btn.is-on {
background: rgba(224, 164, 88, 0.14);
color: var(--warn);
}
.toasts {
position: fixed;
top: 2.315vh;
right: 2.315vh;
z-index: 9;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.926vh;
pointer-events: none;
}
.toast {
position: relative;
display: flex;
align-items: center;
gap: 1.019vh;
max-width: 34vh;
padding: 1.204vh 1.481vh 1.574vh;
overflow: hidden;
border: 1px solid var(--card-line);
border-left: 0.278vh solid var(--text-4);
border-radius: 1.019vh;
background: #131313;
box-shadow: 0 0.741vh 2.222vh rgba(0, 0, 0, 0.5);
animation: toast-in 220ms var(--ease);
}
.toast.is-leaving {
animation: toast-out 220ms var(--ease) forwards;
}
.toast-glyph {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.481vh;
height: 1.481vh;
}
.toast-glyph svg {
width: 100%;
height: 100%;
}
.toast-text {
font-size: 1.111vh;
font-weight: 600;
line-height: 1.35;
color: var(--text);
}
.toast.tone-success {
border-left-color: var(--ok);
color: var(--ok);
}
.toast.tone-error {
border-left-color: var(--danger);
color: var(--danger);
}
.toast.tone-warning {
border-left-color: var(--warn);
color: var(--warn);
}
.toast.tone-inform {
border-left-color: var(--brand);
color: var(--brand);
}
@keyframes toast-in {
from { opacity: 0; transform: translateX(1.852vh); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(1.852vh); }
}
.toast-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.278vh;
background: rgba(255, 255, 255, 0.07);
}
.toast-bar i {
display: block;
height: 100%;
background: currentColor;
transform-origin: left center;
animation-name: toast-bar;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes toast-bar {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}