.card {
box-sizing: border-box;
padding: 20px;
border-radius: var(--r-xl);
background: var(--surface-card);
-webkit-backdrop-filter: var(--blur);
backdrop-filter: var(--blur);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.card--flush { padding: 0; overflow: hidden; }
.card--pad-lg { padding: 24px; }
.card--dark {
background: var(--surface-dark);
box-shadow: rgba(28, 28, 30, 0.24) 0 8px 32px 0;
color: var(--ink-invert);
}
.card--dark .muted { color: var(--ink-invert-soft); }
.card--dark .label { color: var(--ink-invert-soft); }
.card--dark .figure { color: var(--ink-invert); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.card { background: rgba(255, 255, 255, 0.92); }
}
.card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
}
.topbar {
height: var(--topbar-h);
flex-shrink: 0;
width: var(--topbar-w);
margin: 0 auto;
display: flex;
align-items: center;
gap: var(--gutter);
padding: 0 10px 0 20px;
border-radius: var(--r-pill);
background: var(--surface-card);
-webkit-backdrop-filter: var(--blur);
backdrop-filter: var(--blur);
box-shadow: var(--shadow-card);
position: sticky;
top: var(--gutter);
z-index: 40;
}
.topbar__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar__brand img { width: 34px; height: 34px; object-fit: contain; }
.topbar__brand span { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.topbar__nav {
flex-grow: 1;
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.topbar__nav::-webkit-scrollbar { display: none; }
.navlink {
display: flex;
align-items: center;
gap: 7px;
height: 40px;
padding: 0 14px;
border-radius: var(--r-pill);
color: var(--ink-soft);
font-size: var(--fs-small);
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.navlink:hover { background: var(--surface-sunken-2); color: var(--ink); }
.navlink[aria-current="page"] {
background: var(--surface-dark);
color: var(--ink-invert);
}
.navlink[aria-current="page"] svg { color: #7BD88F; }
.navlink__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: var(--r-pill);
background: var(--danger); color: #fff;
font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.navlink__count--ok { background: var(--accent); }
.bell-btn { position: relative; }
.bell-btn[aria-expanded="true"] { background: rgba(28, 28, 30, 0.1); box-shadow: rgba(28, 28, 30, 0.14) 0 0 0 1px inset; }
.bell-btn__count {
position: absolute; top: 3px; right: 2px;
min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
border-radius: 9999px; background: #D9480F; box-shadow: 0 0 0 2px #FFFFFF;
display: flex; align-items: center; justify-content: center;
font-size: 10.5px; font-weight: 700; line-height: 1; color: #FFFFFF;
pointer-events: none;
}
.topbar__end { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.avatar-btn {
display: flex; align-items: center; gap: 10px;
height: var(--tap); padding: 0 12px 0 6px;
border: 0; border-radius: var(--r-pill);
background: var(--surface-sunken);
font-family: inherit; cursor: pointer;
}
.avatar-btn:hover { background: var(--surface-sunken-2); color: var(--ink); }
.avatar-btn[aria-expanded="true"] { background: rgba(28, 28, 30, 0.1); box-shadow: rgba(28, 28, 30, 0.14) 0 0 0 1px inset; }
.avatar-btn__caret { color: #6E6E73; transition: transform 150ms ease; }
.avatar-btn[aria-expanded="true"] svg { transform: rotate(180deg); color: #1A1A1A; }
.avatar {
width: 32px; height: 32px; border-radius: var(--r-pill);
background: var(--surface-dark);
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-micro); font-weight: 600; color: var(--accent);
flex-shrink: 0;
}
.avatar-btn__name { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.pagehead {
flex-shrink: 0;
padding: 20px 24px;
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.pagehead__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pagehead__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagehead__actions { margin-left: auto; display: flex; align-items: center; gap: var(--gutter); flex-shrink: 0; }
.crumbs {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: var(--fs-label); line-height: var(--lh-label);
font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-soft);
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); }
.meta { display: flex; flex-direction: column; gap: 2px; }
.meta__v { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: var(--tap); padding: 0 18px;
border-radius: var(--r-pill);
background: var(--surface-sunken-2);
color: var(--ink);
font-size: 12.5px; font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: transform var(--t-fast) ease,
box-shadow var(--t-base) var(--ease),
background-color var(--t-fast) ease,
opacity var(--t-fast) ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); color: var(--ink); }
.btn:active { transform: none; box-shadow: none; }
.btn--primary {
background: var(--accent-grad);
color: var(--ink-invert);
font-weight: 600;
padding: 0 20px;
box-shadow: var(--shadow-accent);
}
.btn--primary:hover { color: var(--ink-invert); box-shadow: rgba(40, 167, 69, 0.42) 0 8px 22px 0; }
.btn--dark {
background: var(--surface-dark);
color: var(--ink-invert);
font-weight: 600;
padding: 0 20px;
}
.btn--dark:hover { color: var(--ink-invert); }
.btn--danger { background: var(--danger-wash); color: var(--danger); font-weight: 600; }
.btn--danger:hover { background: var(--danger-wash-hard); color: var(--danger); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-sunken-2); }
.btn--block { width: 100%; }
.btn--tall { height: 52px; font-size: var(--fs-body); }
.btn--icon { width: var(--tap); height: var(--tap); padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] {
opacity: 0.45; pointer-events: none; box-shadow: none;
}
.pill-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 11px;
border-radius: var(--r-pill);
background: var(--surface-sunken-2);
font-size: var(--fs-micro); font-weight: 500; color: var(--ink);
white-space: nowrap;
transition: background-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.pill-btn:hover { background: var(--surface-sunken-3); color: var(--ink); transform: translateY(-1px); }
.pill-btn--accent { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; }
.pill-btn--accent:hover { background: var(--accent-wash-hard); color: var(--accent-deep); }
.pill-btn--danger { background: var(--danger-wash); color: var(--danger); font-weight: 600; }
.pill-btn--danger:hover { background: var(--danger-wash-hard); color: var(--danger); }
.pill-btn { position: relative; }
.pill-btn::after {
content: ""; position: absolute; inset: -8px -2px;
}
.chip {
display: inline-flex; align-items: center; gap: 6px;
height: 26px; padding: 0 11px;
border-radius: var(--r-pill);
background: var(--surface-sunken-2);
font-size: var(--fs-small); font-weight: 600; color: var(--ink);
white-space: nowrap;
}
.chip--ok     { background: var(--accent-wash);  color: var(--accent-deep); }
.chip--warn   { background: var(--warn-wash);    color: var(--warn-ink); }
.chip--danger { background: var(--danger-wash);  color: var(--danger); }
.chip--neutral{ background: var(--neutral-wash); color: var(--ink-soft); }
.chip--dark   { background: var(--surface-dark); color: var(--ink-invert); }
.chip--mono   { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; }
.dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; flex-shrink: 0; }
.dot--live { animation: pulse 2s var(--ease) infinite; }
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat__foot { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.delta--up   { color: var(--accent-deep); }
.delta--down { color: var(--danger); }
.delta--flat { color: var(--ink-soft); }
.kv {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 12px;
border-radius: var(--r-md);
background: var(--surface-sunken);
}
.kv__k { font-size: var(--fs-small); color: var(--ink-soft); }
.kv__v { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: right; }
.meter {
height: 6px; border-radius: var(--r-pill);
background: var(--surface-sunken-3);
overflow: hidden;
}
.meter__fill {
height: 100%; border-radius: var(--r-pill);
background: var(--accent-grad);
transform-origin: left center;
}
.meter--warn   .meter__fill { background: linear-gradient(135deg, #d9a05b, #b8791f); }
.meter--danger .meter__fill { background: linear-gradient(135deg, #c1493f, #a8322a); }
.meter--lg { height: 10px; }
.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.table { width: 100%; border-collapse: collapse; }
.table th {
text-align: left;
padding: 0 12px 10px;
font-size: var(--fs-label); line-height: var(--lh-label);
font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-soft);
white-space: nowrap;
border-bottom: 1px solid var(--hairline);
}
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td {
padding: 13px 12px;
font-size: var(--fs-small);
color: var(--ink);
border-bottom: 1px solid var(--hairline);
vertical-align: middle;
}
.table tbody tr { transition: background-color var(--t-fast) ease; }
.table tbody tr:hover { background: var(--surface-card-hi); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td:first-child, .table th:first-child { padding-left: 4px; }
.table td:last-child,  .table th:last-child  { padding-right: 4px; }
.table .cell-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cell-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-main strong { font-size: 12.5px; font-weight: 600; }
.cell-main span { font-size: var(--fs-micro); color: var(--ink-soft); }
.cell-lead { display: flex; align-items: center; gap: 11px; min-width: 0; }
.thumb {
width: 34px; height: 34px; flex-shrink: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: rgba(28, 28, 30, 0.10) 0 0 0 1px inset;
color: var(--ink);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.thumb--accent {
background: rgba(40, 167, 69, 0.16);
box-shadow: rgba(255, 255, 255, 0.55) 0 0 0 1px inset;
color: var(--accent-deep);
}
.thumb--danger {
background: rgba(168, 50, 42, 0.14);
box-shadow: rgba(255, 255, 255, 0.50) 0 0 0 1px inset;
color: var(--danger);
}
.thumb--warn {
background: rgba(217, 160, 91, 0.22);
box-shadow: rgba(255, 255, 255, 0.50) 0 0 0 1px inset;
color: var(--warn-ink);
}
.thumb--dark {
background: rgba(28, 28, 30, 0.10);
box-shadow: rgba(255, 255, 255, 0.45) 0 0 0 1px inset;
color: var(--ink);
}
.thumb--lg { width: 44px; height: 44px; }
.tile {
display: flex; align-items: center; gap: 11px;
padding: 11px 13px;
border-radius: var(--r-lg);
background: var(--surface-sunken);
transition: background-color var(--t-fast) ease, transform var(--t-fast) ease;
}
a.tile:hover { background: var(--surface-card-hi); color: var(--ink); transform: translateX(2px); }
.tile--ok     { background: var(--accent-wash); }
.tile--warn   { background: var(--warn-wash); }
.tile--danger { background: var(--danger-wash); }
.tile__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex-grow: 1; }
.tile__title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.tile__sub { font-size: var(--fs-micro); color: var(--ink-soft); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label { font-size: var(--fs-small); line-height: 16px; font-weight: 500; color: var(--ink-soft); }
.field__hint { font-size: var(--fs-micro); color: var(--ink-soft); }
.input, .select, .textarea {
box-sizing: border-box;
width: 100%;
height: var(--tap);
padding: 0 14px;
border: 0;
border-radius: var(--r-lg);
background: var(--surface-input-hi);
box-shadow: rgba(28, 28, 30, 0.10) 0 0 0 1px inset;
outline: none;
font-family: inherit;
font-size: var(--fs-body);
color: var(--ink);
transition: box-shadow var(--t-fast) ease, background-color var(--t-fast) ease;
}
.textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 20px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { box-shadow: rgba(28, 28, 30, 0.2) 0 0 0 1px inset; }
.input:focus, .select:focus, .textarea:focus {
box-shadow: var(--accent) 0 0 0 1px inset, var(--accent-ring) 0 0 0 3px;
background: #fff;
}
.select {
appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256' fill='%236e6e73'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.field--error .input, .field--error .select, .field--error .textarea {
box-shadow: var(--danger) 0 0 0 1px inset, rgba(168, 50, 42, 0.22) 0 0 0 3px;
}
.field__error {
display: flex; align-items: center; gap: 7px;
font-size: var(--fs-small); font-weight: 500; color: var(--danger);
}
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-right: 52px; }
.input-group__btn {
position: absolute; right: 4px;
width: 40px; height: 40px;
border-radius: var(--r-pill);
display: flex; align-items: center; justify-content: center;
color: var(--ink-soft);
transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.input-group__btn:hover { background: var(--surface-sunken-2); color: var(--ink); }
.search {
display: flex; align-items: center; gap: 10px;
height: var(--tap); padding: 0 16px;
border-radius: var(--r-pill);
background: var(--surface-sunken);
border: 1px solid transparent;
min-width: 0;
}
.search:focus-within { background: #fff; border-color: var(--accent); box-shadow: var(--accent-ring) 0 0 0 3px; }
.search input {
border: 0; background: none; outline: none; width: 100%;
font-size: var(--fs-small); color: var(--ink);
}
.segmented {
display: inline-flex; align-items: center; gap: 2px;
padding: 3px; border-radius: var(--r-pill);
background: var(--surface-sunken-2);
}
.segmented button, .segmented a {
height: 32px; padding: 0 14px; border-radius: var(--r-pill);
font-size: var(--fs-micro); font-weight: 600; color: var(--ink-soft);
display: flex; align-items: center; gap: 6px;
transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.segmented button:hover, .segmented a:hover { color: var(--ink); }
.segmented [aria-pressed="true"], .segmented [aria-current="true"] {
background: #fff; color: var(--ink);
box-shadow: rgba(28, 28, 30, 0.08) 0 1px 3px;
}
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-deep); flex-shrink: 0; }
.check span { font-size: var(--fs-small); line-height: 18px; }
.note {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px;
border-radius: var(--r-lg);
background: rgba(28, 28, 30, 0.04);
font-size: 11.5px; line-height: 17px; color: var(--ink);
}
.note--ok     { background: var(--accent-wash); }
.note--warn   { background: var(--warn-wash); }
.note--danger { background: var(--danger-wash); }
.note svg { margin-top: 1px; }
.empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px; padding: 48px 24px; text-align: center; flex-grow: 1;
}
.empty__icon {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(40, 167, 69, 0.14);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: rgba(255, 255, 255, 0.55) 0 0 0 1px inset;
color: var(--accent-deep);
display: flex; align-items: center; justify-content: center;
}
.empty__title { font-size: var(--fs-section); font-weight: 600; }
.empty__body { font-size: var(--fs-small); color: var(--ink-soft); max-width: 46ch; line-height: 19px; }
.skeleton {
border-radius: var(--r-md);
background: linear-gradient(90deg,
rgba(28, 28, 30, 0.05) 0%, rgba(28, 28, 30, 0.10) 50%, rgba(28, 28, 30, 0.05) 100%);
background-size: 200% 100%;
animation: shimmer 1.4s linear infinite;
}
.spinner {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--surface-sunken-3);
border-top-color: var(--accent-deep);
animation: spin 700ms linear infinite;
}
.chart { width: 100%; min-height: 0; flex-grow: 1; }
.chart--sm { height: 180px; flex-grow: 0; }
.chart--md { height: 260px; flex-grow: 0; }
.chart--lg { height: 340px; flex-grow: 0; }
.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legend__item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--ink-soft); }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.photo {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--surface-sunken-2);
box-shadow: rgba(28, 28, 30, 0.07) 0 0 0 1px inset;
display: flex; align-items: center; justify-content: center;
transition: transform var(--t-fast) ease, box-shadow var(--t-base) var(--ease);
}
a.photo:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo__tag {
position: absolute; left: 8px; bottom: 8px;
display: flex; align-items: center; gap: 5px;
height: 22px; padding: 0 8px;
border-radius: var(--r-pill);
background: rgba(28, 28, 30, 0.72);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
font-size: 10px; font-weight: 600; color: #fff;
}
.photo__flag {
position: absolute; right: 8px; top: 8px;
width: 24px; height: 24px; border-radius: var(--r-pill);
display: flex; align-items: center; justify-content: center;
background: var(--danger); color: #fff;
}
.modal-backdrop {
position: fixed; inset: 0; z-index: 90;
background: rgba(28, 28, 30, 0.42);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
padding: var(--gutter);
animation: fade 200ms var(--ease) both;
}
.modal {
width: 100%; max-width: 480px;
padding: 24px;
border-radius: var(--r-xl);
background: #fff;
box-shadow: var(--shadow-modal);
display: flex; flex-direction: column; gap: var(--gap);
animation: rise 260ms var(--ease) both;
max-height: calc(100vh - 2 * var(--gutter));
overflow-y: auto;
}
.modal--wide { max-width: 680px; }
.modal__actions { display: flex; gap: 10px; }
.modal__actions .btn { flex-grow: 1; }
.toast-stack {
position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 95;
display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
pointer-events: none;
}
.toast {
display: flex; align-items: center; gap: 10px;
padding: 13px 18px;
border-radius: var(--r-pill);
background: var(--surface-dark);
color: var(--ink-invert);
font-size: var(--fs-small); font-weight: 500;
box-shadow: var(--shadow-modal);
animation: rise 260ms var(--ease) both;
pointer-events: auto;
}
.toast--ok svg     { color: #7BD88F; }
.toast--danger svg { color: #ef8079; }
.toast--warn svg   { color: var(--warn); }
.foot {
flex-shrink: 0;
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding: 4px 8px 0;
font-size: var(--fs-micro); color: var(--ink-soft);
}
@media (max-width: 1520px) {
.navlink { padding: 0 11px; }
.topbar__nav { gap: 2px; }
}
@media (max-width: 1400px) {
.navlink span { display: none; }
.navlink { padding: 0 12px; }
}
@media (max-width: 1240px) {
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.topbar { height: auto; padding: 8px 8px 8px 14px; flex-wrap: wrap; gap: 10px; }
.topbar__nav { order: 3; width: 100%; }
.navlink span { display: inline; }
.avatar-btn__name { display: none; }
.avatar-btn { padding: 0 6px; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
.pagehead { padding: 16px; gap: 14px; }
.pagehead__actions { margin-left: 0; width: 100%; }
.display { font-size: 24px; line-height: 28px; }
.card { padding: 16px; border-radius: 20px; }
.table-wrap { margin: 0 -16px; padding: 0 16px; }
}
[data-pl-veil] { visibility: hidden; }
body:not(.pl-run) [data-r="grid"], body:not(.pl-run) .pl-case { visibility: hidden; }
@media print {
.topbar, .pagehead__actions, .foot, .toast-stack { display: none !important; }
body { background: #fff; }
.card { box-shadow: none; background: #fff; border: 1px solid #d3d3d3; }
}