@font-face {
font-family: "Onest";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/onest-v11-cyrillic.d1abf183873c.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Onest";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/onest-v11-cyrillic-ext.598aa19ac1bf.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Onest";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/onest-v11-latin.fd7dbbcb3633.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Onest";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/onest-v11-latin-ext.960412f3c7e3.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root,
html[data-theme="light"] {
--color-bg: #EEF0F4;
--color-bg-deep: #E3E6EC;
--color-surface: #FFFFFF;
--color-surface-soft: #EFF1F5;
--color-surface-alt: #F7F8FA;
--color-border: #E0E3E9;
--color-border-strong: #C9CDD7;
--color-text: #16181D;
--color-heading: #0C0E12;
--color-muted: #5D6675;
--color-faint: #6F7788;
--color-primary: #005BFF;
--color-primary-dark: #0047CC;
--color-primary-strong: #0051E6;
--color-primary-soft: #EBF1FF;
--color-on-primary: #FFFFFF;
--chat-canvas: #FFFFFF;
--chat-bubble: #EFF0F4;
--chat-bubble-own: #D9E7FB;
--chat-bubble-shadow: none;
--chat-muted: var(--color-muted);
--chat-faint: #626B7C;
--chat-accent: var(--color-primary);
--chat-muted-own: #5D6675;
--chat-faint-own: #5D6675;
--chat-accent-own: #0047CC;
--chat-stamp: #6F7788;
--chat-stamp-read: #005BFF;
--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
--color-coral: #DD0F5F;
--color-coral-soft: #FDECF2;
--color-beige: #C9AE85;
--color-beige-soft: #F5EFE5;
--color-violet: #6E4EF2;
--color-violet-soft: #EFEBFE;
--color-cyan: #0B7285;
--color-cyan-soft: #DFF3F7;
--color-magenta: #A81E8F;
--color-magenta-soft: #FBE7F6;
--chart-amber: #F59E0B;
--chart-sand: #C89B57;
--color-success: #08834B;
--color-success-soft: #E4F6EC;
--color-warning: #A56408;
--color-warning-soft: #FBF0DB;
--color-danger: #D02B39;
--color-danger-soft: #FCE9EA;
--color-info: #005BFF;
--color-info-soft: #EBF1FF;
--topbar-tint: #FFFFFF;
--topbar-bg: color-mix(in srgb, var(--topbar-tint) 88%, transparent);
--topbar-shadow: 0 10px 26px -24px rgba(12, 14, 18, 0.55);
--sidebar-bg: #14161C;
--sidebar-bg-deep: #0E1014;
--sidebar-border: #24272F;
--sidebar-text: #B4BAC7;
--sidebar-heading: #F2F3F6;
--sidebar-active: #2563EB;
--shadow-xs: 0 1px 2px rgba(12, 14, 18, 0.06);
--shadow-sm: 0 1px 3px rgba(12, 14, 18, 0.09), 0 1px 2px rgba(12, 14, 18, 0.05);
--shadow-soft: 0 10px 30px rgba(12, 14, 18, 0.10);
--shadow-card:
0 1px 2px rgba(12, 14, 18, 0.04),
0 6px 16px -8px rgba(12, 14, 18, 0.09),
0 0 0 0.5px rgba(12, 14, 18, 0.03);
--shadow-pop: 0 16px 44px rgba(12, 14, 18, 0.18), 0 4px 12px rgba(12, 14, 18, 0.09);
--shadow-md: 0 8px 24px rgba(12, 14, 18, 0.12);
--shadow-lg: 0 18px 48px rgba(12, 14, 18, 0.16);
--shadow-primary: 0 4px 12px rgba(12, 14, 18, 0.14);
--ring: 0 0 0 3px rgba(0, 91, 255, 0.30);
--ring-soft: 0 0 0 4px rgba(0, 91, 255, 0.12);
--gradient-brand: linear-gradient(135deg, #005BFF, #4D8DFF);
--gradient-primary: linear-gradient(180deg, #1A6BFF, #0051E6);
--gradient-surface: linear-gradient(180deg, #FFFFFF, #F7F8FA);
--radius-2xl: 26px;
--radius-xl: 16px;
--radius-lg: 18px;
--radius-md: 12px;
--radius-sm: 9px;
--radius-pill: 999px;
--color-divider: color-mix(in srgb, var(--color-text) 9%, transparent);
--chart-track: color-mix(in srgb, var(--color-text) 10%, transparent);
--gap-cards: 20px;
--control-h: 44px;
--control-h-sm: 34px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--sidebar-w: 260px;
--topbar-h: 64px;
--ease: cubic-bezier(0.22, 0.7, 0.25, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
color-scheme: light;
}
html[data-theme="dark"] {
--color-bg: #0D0D0E;
--color-bg-deep: #060607;
--color-surface: #1A1B1E;
--color-surface-soft: #2A2B30;
--color-surface-alt: #202125;
--color-border: #2C2D31;
--color-border-strong: #383A40;
--color-text: #E7E7EA;
--color-heading: #FAFAFB;
--color-muted: #9C9DA4;
--color-faint: #87888F;
--color-primary: #4187FF;
--color-primary-dark: #80AFFF;
--color-primary-strong: #196DFF;
--color-primary-soft: rgba(65, 135, 255, 0.16);
--color-on-primary: #FFFFFF;
--color-coral: #FF6E9E;
--color-coral-soft: rgba(255, 110, 158, 0.15);
--color-beige: #D9C29B;
--color-beige-soft: rgba(217, 194, 155, 0.13);
--color-violet: #BE8CFF;
--color-violet-soft: rgba(190, 140, 255, 0.15);
--color-cyan: #4ECDE0;
--color-cyan-soft: rgba(78, 205, 224, 0.16);
--color-magenta: #F08CDC;
--color-magenta-soft: rgba(240, 140, 220, 0.16);
--chart-amber: #F5B04C;
--chart-sand: #D9C29B;
--color-success: #3DD68C;
--color-success-soft: rgba(61, 214, 140, 0.14);
--color-warning: #F5B04C;
--color-warning-soft: rgba(245, 176, 76, 0.14);
--color-danger: #F57A83;
--color-danger-soft: rgba(245, 122, 131, 0.14);
--color-info: #4187FF;
--color-info-soft: rgba(65, 135, 255, 0.16);
--topbar-tint: var(--color-bg);
--topbar-bg: color-mix(in srgb, var(--topbar-tint) 72%, transparent);
--topbar-shadow: none;
--sidebar-bg: #060607;
--sidebar-bg-deep: #030304;
--sidebar-border: #1C1D21;
--sidebar-text: #9C9DA4;
--sidebar-heading: #F5F5F7;
--sidebar-active: #2563EB;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
--shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.38);
--shadow-card: 0 2px 6px rgba(0, 0, 0, 0.30);
--shadow-md: 0 10px 28px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.62);
--shadow-pop: 0 22px 60px rgba(0, 0, 0, 0.7), 0 6px 18px rgba(0, 0, 0, 0.5);
--chat-canvas: #1A1B1E;
--chat-bubble: #33373F;
--chat-bubble-own: #5A5ED6;
--chat-bubble-shadow: none;
--chat-muted: #A8A9B0;
--chat-faint: #A5A6AD;
--chat-accent: #6FA5FF;
--chat-muted-own: #E8F0FF;
--chat-faint-own: #E8F0FF;
--chat-accent-own: #FFFFFF;
--chat-stamp: #87888F;
--chat-stamp-read: #8288EC;
--shadow-primary: 0 6px 16px rgba(0, 0, 0, 0.42);
--ring: 0 0 0 3px rgba(65, 135, 255, 0.40);
--ring-soft: 0 0 0 4px rgba(65, 135, 255, 0.16);
--gradient-brand: linear-gradient(135deg, #196DFF, #4F90FF);
--gradient-primary: linear-gradient(180deg, #196DFF, #0059F2);
--gradient-surface: linear-gradient(180deg, #191A1D00, #26272B33);
color-scheme: dark;
}
:root {
--ui-scale: 1;
--vu: 1;
}
@supports (zoom: 0.8) {
@media (min-width: 820px) and (pointer: fine) {
:root {
--ui-scale: 0.85;
--vu: 1.1765;
}
}
@media (min-width: 820px) and (pointer: coarse) {
:root {
--ui-scale: 0.95;
--vu: 1.0526;
}
}
@media (min-width: 3000px) {
:root {
--ui-scale: 1;
--vu: 1;
}
}
html[data-text-size="s"] { --ui-scale: 0.92; --vu: 1.087; }
html[data-text-size="l"] { --ui-scale: 1.12; --vu: 0.8929; }
html[data-text-size="xl"] { --ui-scale: 1.25; --vu: 0.8; }
@media (min-width: 820px) and (pointer: fine) {
html[data-text-size="s"] { --ui-scale: 0.782; --vu: 1.2788; }
html[data-text-size="l"] { --ui-scale: 0.952; --vu: 1.0504; }
html[data-text-size="xl"] { --ui-scale: 1.0625; --vu: 0.9412; }
}
@media (min-width: 820px) and (pointer: coarse) {
html[data-text-size="s"] { --ui-scale: 0.874; --vu: 1.1442; }
html[data-text-size="l"] { --ui-scale: 1.064; --vu: 0.9398; }
html[data-text-size="xl"] { --ui-scale: 1.1875; --vu: 0.8421; }
}
@media (min-width: 3000px) {
html[data-text-size="s"] { --ui-scale: 0.92; --vu: 1.087; }
html[data-text-size="l"] { --ui-scale: 1.12; --vu: 0.8929; }
html[data-text-size="xl"] { --ui-scale: 1.25; --vu: 0.8; }
}
}
@media (min-width: 820px) and (max-width: 1024px) and (pointer: coarse) {
:root, html[data-theme] { --sidebar-w: 216px; }
}
*, *::before, *::after { box-sizing: border-box; }
html {
zoom: var(--ui-scale);
-webkit-text-size-adjust: 100%; background: var(--color-bg);
scrollbar-gutter: stable;
overscroll-behavior-y: none;
}
body {
margin: 0;
font-family: "Onest", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
background: var(--color-bg);
color: var(--color-text);
font-size: 14px;
line-height: 1.5;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overscroll-behavior-y: none;
font-variant-numeric: tabular-nums;
}
html[data-theme="light"] body {
background:
radial-gradient(1100px 520px at 84% -8%, rgba(0, 91, 255, 0.030), transparent 62%),
radial-gradient(900px 480px at -8% 104%, rgba(201, 174, 133, 0.045), transparent 60%),
radial-gradient(760px 420px at 104% 92%, rgba(241, 37, 107, 0.016), transparent 58%),
var(--color-bg);
background-attachment: fixed;
}
html[data-theme="dark"] body {
background:
radial-gradient(1100px 520px at 82% -6%, rgba(25, 109, 255, 0.05), transparent 62%),
radial-gradient(900px 480px at -8% 106%, rgba(79, 144, 255, 0.035), transparent 60%),
var(--color-bg);
background-attachment: fixed;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--color-heading); letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
button:disabled,
[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
img { max-width: 100%; }
svg { display: block; }
::selection { background: color-mix(in srgb, var(--color-primary) 26%, transparent); color: var(--color-text); }
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--color-muted) 34%, transparent);
border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-muted) 55%, transparent); background-clip: padding-box; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 0;
box-shadow: var(--ring);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__logo { height: 48px; width: auto; max-width: 172px; object-fit: contain; }
.brand--lg .brand__logo { height: 78px; max-width: 310px; }
.brand-logo { display: inline-flex; align-items: center; justify-content: center; }
.brand-logo__img { height: 48px; width: auto; max-width: 100%; object-fit: contain; }
.auth-card > .brand-logo { align-self: flex-start; }
.brand-logo--sm .brand-logo__img { height: 42px; }
.brand-logo--lg .brand-logo__img { height: 92px; }
.brand-logo__word {
display: none; font-weight: 800; font-size: 22px;
letter-spacing: .04em; color: var(--color-primary-dark);
}
.brand-logo--lg .brand-logo__word { font-size: 32px; }
.brand-logo--fallback .brand-logo__word { display: inline-flex; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 18px; border-radius: var(--radius-pill); border: 1px solid transparent;
font-weight: 650; font-size: 13.5px; line-height: 1; white-space: nowrap;
letter-spacing: -0.01em;
transition: transform .16s var(--ease), box-shadow .18s var(--ease),
background-color .18s var(--ease), border-color .18s var(--ease), filter .18s var(--ease);
}
.btn svg { width: 17px; height: 17px; }
.btn__caret { width: 15px !important; height: 15px !important; opacity: .7; }
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; min-height: var(--control-h); }
.btn-sm { padding: 8px 14px; font-size: 13px; min-height: var(--control-h-sm); }
.btn-lg { padding: 14px 26px; font-size: 15px; border-radius: var(--radius-pill); }
.btn:disabled,
.btn.is-disabled { pointer-events: none; filter: grayscale(.08); }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
border: 2px solid currentColor; border-right-color: transparent; color: #fff;
animation: spin .8s linear infinite;
}
.btn-primary {
background: var(--gradient-primary);
color: var(--color-on-primary); box-shadow: var(--shadow-primary);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: var(--shadow-primary); transform: translateY(-1px); }
.btn-secondary {
background: var(--color-surface); color: var(--color-text);
border-color: var(--color-border-strong); box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); color: var(--color-primary-dark); background: var(--color-surface-alt); transform: translateY(-1px); }
.btn-danger {
background: var(--color-danger); color: #fff;
box-shadow: 0 8px 20px color-mix(in srgb, var(--color-danger) 28%, transparent);
}
.btn-danger:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-success {
background: var(--color-success); color: #fff;
box-shadow: 0 8px 20px color-mix(in srgb, var(--color-success) 26%, transparent);
}
.btn-success:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-warning {
background: var(--color-warning); color: #fff;
box-shadow: 0 8px 20px color-mix(in srgb, var(--color-warning) 28%, transparent);
}
.btn-warning:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--color-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--color-surface-soft); color: var(--color-text); }
.btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: var(--radius-md);
background: var(--color-surface); border: 1px solid var(--color-border);
color: var(--color-muted); position: relative;
transition: transform .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.btn-icon svg { width: 19px; height: 19px; flex: 0 0 auto; }
.btn-icon:hover { color: var(--color-primary-dark); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); background: var(--color-surface-alt); transform: translateY(-1px); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--color-muted); line-height: 20px; }
.form-label { font-size: 13px; font-weight: 700; color: var(--color-muted); }
.input,
.form-control {
width: 100%; padding: 12px 16px; font-size: 14px; line-height: 1.25;
font-family: inherit;
min-height: var(--control-h);
background: var(--color-surface-alt); color: var(--color-text);
border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
outline: none;
transition: border-color .18s var(--ease), box-shadow .22s var(--ease), background-color .18s var(--ease);
}
input[type="date"].input,
input[type="time"].input,
input[type="datetime-local"].input,
input[type="month"].input,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control { height: var(--control-h); }
.input-sm { padding: 7px 11px; font-size: 13px; min-height: var(--control-h-sm); }
input[type="date"].input-sm,
input[type="time"].input-sm,
input[type="datetime-local"].input-sm,
input[type="month"].input-sm { height: var(--control-h-sm); }
.input::placeholder,
.form-control::placeholder { color: var(--color-faint); opacity: 1; }
.input:hover,
.form-control:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border-strong)); }
.input:focus,
.form-control:focus { border-color: var(--color-primary); background: var(--color-surface); box-shadow: var(--ring-soft); }
textarea.input,
textarea.form-control { min-height: 118px; resize: vertical; }
select.input,
select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.checkbox,
.checkbox-row { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--color-muted); cursor: pointer; user-select: none; }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
flex: none;
width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--color-border);
background: var(--color-surface); position: relative; transition: all .18s var(--ease);
}
[data-delete-gate] .checkbox__box { border-color: var(--color-muted); }
.checkbox__box::after {
content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 9px;
border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
transition: transform .18s var(--ease); top: -1px;
}
.checkbox input:checked + .checkbox__box { background: var(--color-primary); border-color: var(--color-primary); }
.checkbox input:checked + .checkbox__box::after { transform: rotate(45deg) scale(1); }
.checkbox input:focus-visible + .checkbox__box { box-shadow: var(--ring); }
.checkbox input:disabled + .checkbox__box { opacity: .5; }
.checkbox:has(input:disabled) { opacity: .7; cursor: default; }
.checkbox input[type="radio"] + .checkbox__box { border-radius: 50%; }
.checkbox input[type="radio"] + .checkbox__box::after {
width: 7px; height: 7px; border: 0; border-radius: 50%; background: #fff;
top: 0; transform: scale(0);
}
.checkbox input[type="radio"]:checked + .checkbox__box::after { transform: scale(1); }
.link { color: var(--color-primary-dark); font-weight: 600; transition: color .15s var(--ease); }
.link:hover { color: var(--color-primary); text-decoration: underline; }
.alert { padding: 11px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 550; border: 1px solid transparent; }
.alert-info,
.alert--info { background: var(--color-primary-soft); color: var(--color-primary-dark); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.alert-success { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.alert-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 34%, transparent); }
.alert-danger,
.alert-error { background: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 34%, transparent); }
.input--error { border-color: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 16%, transparent); }
.alert--action {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
position: relative; overflow: hidden;
animation: undo-alert-in .34s var(--ease) both;
}
.alert--action .alert__text { flex: 1 1 200px; min-width: 0; }
.alert__action { flex: 0 0 auto; margin: 0; }
.alert__undo {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; color: inherit;
border-color: color-mix(in srgb, currentColor 32%, transparent);
background: color-mix(in srgb, currentColor 8%, transparent);
}
.alert__undo:hover { color: inherit; background: color-mix(in srgb, currentColor 16%, transparent); }
.alert__undo-icon { width: 15px; height: 15px; flex: 0 0 auto; transition: transform .3s var(--ease); }
.alert__undo:hover .alert__undo-icon { transform: rotate(-150deg); }
.alert__undo-clock {
font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600;
opacity: .72; letter-spacing: .01em;
}
.alert__undo-clock::before { content: "·"; margin-right: 5px; opacity: .6; }
.alert__undo-clock:empty { display: none; }
.alert__timer {
position: absolute; left: 0; bottom: 0; height: 2px;
width: 100%; transform-origin: left center;
transform: scaleX(var(--undo-left, 1));
background: currentColor; opacity: .32;
transition: transform 1s linear;
}
.alert--action.is-undo-expired .alert__undo { opacity: .45; pointer-events: none; }
.alert--action.is-undo-expired .alert__timer { opacity: 0; }
@keyframes undo-alert-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.alert__undo { animation: undo-btn-attention 1.15s var(--ease) 2; }
@keyframes undo-btn-attention {
0%, 100% { background: color-mix(in srgb, currentColor 8%, transparent); }
50% { background: color-mix(in srgb, currentColor 24%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.alert--action, .alert__undo { animation: none; }
.alert__timer { transition: none; }
.alert__undo:hover .alert__undo-icon { transform: none; }
}
.alert__goto {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; color: inherit; text-decoration: none;
border-color: color-mix(in srgb, currentColor 32%, transparent);
background: color-mix(in srgb, currentColor 8%, transparent);
}
.alert__goto:hover {
color: inherit; text-decoration: none;
background: color-mix(in srgb, currentColor 16%, transparent);
}
.alert__goto-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.impact-list { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.impact-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 11px; border-radius: var(--radius-sm); background: var(--color-surface-2, color-mix(in srgb, var(--color-muted) 8%, transparent)); }
.impact-list--danger li { background: var(--color-danger-soft); color: var(--color-danger); }
.form-error { color: var(--color-danger); font-size: 12px; font-weight: 650; }
.field__hint,
.form-help { color: var(--color-muted); font-size: 12px; }
.field__hint:empty { display: none; }
.field__hint--warn { color: var(--color-warning); font-weight: 600; }
.req { color: var(--color-coral); font-weight: 800; }
.password-field { position: relative; display: block; }
.password-field__input { padding-right: 48px; }
.password-field__toggle {
position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted);
transition: background-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.password-field__toggle:hover,
.password-field__toggle:focus-visible { color: var(--color-primary-dark); background: var(--color-primary-soft); }
.password-field__toggle:focus-visible { outline: none; box-shadow: var(--ring-soft); }
.password-field__toggle:active { transform: translateY(-50%) scale(.97); }
.password-field__icon {
width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9;
stroke-linecap: round; stroke-linejoin: round;
}
.password-field__icon--hide,
.password-field__toggle.is-visible .password-field__icon--show { display: none; }
.password-field__toggle.is-visible .password-field__icon--hide { display: block; }
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 11px; border-radius: var(--radius-pill);
font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap;
}
.badge-info, .badge-primary { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-secondary { background: var(--color-surface-soft); color: var(--color-muted); }
.app-shell { display: flex; min-height: calc(100vh * var(--vu)); }
.app-shell::before,
.app-shell::after {
content: ""; position: fixed; left: 0; right: 0; height: calc(60vh * var(--vu)); z-index: 45;
pointer-events: none; background: var(--color-bg);
}
.app-shell::before { top: calc(-60vh * var(--vu)); }
.app-shell::after { bottom: calc(-60vh * var(--vu)); }
@media (min-width: 820px) {
.app-shell::before,
.app-shell::after { --overscroll-rail-w: var(--sidebar-w); }
html.sidebar-collapsed .app-shell::before,
html.sidebar-collapsed .app-shell::after { --overscroll-rail-w: 74px; }
.app-shell::before {
background: linear-gradient(90deg,
var(--sidebar-bg) 0 calc(var(--overscroll-rail-w) - 1px),
var(--sidebar-border) calc(var(--overscroll-rail-w) - 1px) var(--overscroll-rail-w),
var(--color-bg) var(--overscroll-rail-w));
}
.app-shell::after {
background: linear-gradient(90deg,
var(--sidebar-bg-deep) 0 calc(var(--overscroll-rail-w) - 1px),
var(--sidebar-border) calc(var(--overscroll-rail-w) - 1px) var(--overscroll-rail-w),
var(--color-bg) var(--overscroll-rail-w));
}
}
.sidebar {
position: sticky; top: 0; align-self: flex-start;
width: var(--sidebar-w); height: calc(100vh * var(--vu)); flex: 0 0 var(--sidebar-w);
background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-deep));
border-right: 1px solid var(--sidebar-border);
box-shadow: 14px 0 34px -22px rgba(6, 8, 14, 0.55);
display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; z-index: 40;
--color-surface: #1D212B;
--color-surface-soft: #232836;
--color-surface-alt: #20242F;
--color-border: #2A2F3C;
--color-border-strong: #3B4252;
--color-text: #D9DCE3;
--color-heading: var(--sidebar-heading);
--color-muted: var(--sidebar-text);
--color-faint: #7C8497;
--color-primary: var(--sidebar-active);
--color-primary-dark: #8FAFFF;
--color-primary-soft: rgba(91, 140, 255, 0.15);
--color-coral-soft: rgba(255, 92, 147, 0.15);
--color-beige-soft: rgba(213, 188, 147, 0.14);
--color-success-soft: rgba(52, 201, 127, 0.15);
--color-warning-soft: rgba(242, 169, 59, 0.15);
--color-danger-soft: rgba(242, 109, 118, 0.16);
--color-success: #34C97F;
--color-warning: #F2A93B;
--color-danger: #F26D76;
color-scheme: dark;
}
html[data-theme="dark"] .sidebar {
--color-surface: #141417;
--color-surface-soft: #1D1E22;
--color-surface-alt: #18191C;
--color-border: #1F2024;
--color-border-strong: #303237;
--color-text: #D6D7DB;
--color-faint: #7E7F87;
--color-primary-dark: #80AFFF;
--color-primary-soft: rgba(65, 135, 255, 0.16);
}
.sidebar__brand { padding: 18px 8px 14px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.sidebar__footer { padding-top: 12px; border-top: 1px solid var(--sidebar-border); margin-top: 6px; }
.sidebar__copy {
display: flex; flex-direction: column; gap: 1px;
padding: 10px 12px 2px; font-size: 11px; line-height: 1.35;
color: var(--color-faint); letter-spacing: .01em;
}
.sidebar__copy-line { white-space: nowrap; }
.sidebar-item {
position: relative; display: flex; align-items: center; gap: 11px;
padding: 7px 12px; border-radius: 12px;
color: var(--sidebar-text); font-weight: 550; font-size: 13.5px;
transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.sidebar-item__icon { width: 19px; height: 19px; flex: 0 0 19px; opacity: .8; }
.sidebar-item__label { flex: 1; }
.sidebar-item__badge { margin-left: auto; }
.sidebar-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--sidebar-heading); }
.sidebar-item:hover .sidebar-item__icon { opacity: 1; }
.sidebar-item.is-active {
background: color-mix(in srgb, var(--sidebar-active) 14%, transparent);
color: #FFFFFF; font-weight: 600;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-active) 40%, transparent);
}
.sidebar-item.is-active .sidebar-item__icon {
width: 27px; height: 27px; flex: 0 0 27px;
padding: 4px; margin: -4px;
border-radius: 9px;
background: var(--sidebar-active);
color: #FFFFFF; opacity: 1;
}
@media (min-width: 820px) {
html.sidebar-collapsed .sidebar {
width: 74px; flex: 0 0 74px; padding: 18px 12px;
}
html.sidebar-collapsed .sidebar__brand { display: none; }
html.sidebar-collapsed .sidebar__section,
html.sidebar-collapsed .sidebar-item__label,
html.sidebar-collapsed .sidebar-item__badge,
html.sidebar-collapsed .sidebar-item__soon { display: none; }
html.sidebar-collapsed .sidebar-item { justify-content: center; padding: 11px 0; gap: 0; }
html.sidebar-collapsed .sidebar__copy { align-items: center; padding: 10px 0 2px; }
html.sidebar-collapsed .sidebar__copy-line + .sidebar__copy-line { display: none; }
}
.railtip {
position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
padding: 6px 10px; border-radius: 8px; white-space: nowrap;
background: var(--color-heading); color: var(--color-bg);
font-size: 12px; font-weight: 600; line-height: 1.25;
box-shadow: var(--shadow-sm);
opacity: 0; visibility: hidden; transform: translateX(-5px);
transition: opacity .14s var(--ease), transform .14s var(--ease),
visibility 0s linear .14s;
}
.railtip.is-open {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
position: sticky; top: 0; z-index: 34;
height: var(--topbar-h); display: flex; align-items: center; gap: 14px;
padding: 0 22px; background: var(--topbar-bg);
backdrop-filter: saturate(150%) blur(14px);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--topbar-shadow);
}
.topbar .btn-icon {
width: 44px; height: 44px; border-radius: var(--radius-pill);
background: transparent; border-color: transparent;
}
.topbar .btn-icon:hover { background: var(--color-surface-soft); transform: none; }
html[data-theme="light"] .topbar__search-input { background: var(--color-bg); }
.topbar__menu { display: inline-flex; }
.topbar__back { display: inline-flex; flex: 0 0 auto; }
.topbar__brand { display: none; }
.topbar__search { position: relative; flex: 1; max-width: 540px; }
.topbar__search-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-faint); pointer-events: none; }
.topbar__search-input { padding-left: 46px; height: 50px; min-height: 50px; border-radius: var(--radius-pill); background: var(--color-surface-alt); border-color: transparent; font-size: 14px; }
.topbar__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar__bell { position: relative; }
.topbar__bell-count {
position: absolute; top: -2px; right: -2px; min-width: 19px; height: 19px;
padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-coral);
color: #fff; font-size: 11px; font-weight: 800; display: inline-flex;
--pulse-ring: var(--topbar-tint);
align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--topbar-tint);
}
.topbar__user { position: relative; }
.topbar__user-button {
display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 10px;
border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--color-text);
transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.topbar__user-button:hover { background: var(--color-surface-soft); transform: translateY(-1px); }
.topbar__user-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.topbar__user-name { font-weight: 700; font-size: 13.5px; }
.topbar__user-role { font-size: 12px; color: var(--color-muted); }
.topbar__user-avatar {
width: 38px; height: 38px; border-radius: 50%; display: inline-flex;
align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff;
background: var(--gradient-brand);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), var(--shadow-xs);
}
.topbar__user-avatar--img { object-fit: cover; background: var(--color-surface-soft); }
.card.avatar-card {
max-width: 760px; padding: 28px;
flex-direction: row; flex-wrap: wrap; align-items: center; gap: 32px;
}
.avatar-card__preview {
flex: 0 0 auto; min-width: 170px;
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.avatar-card__ring {
display: inline-flex; padding: 4px; border-radius: 50%;
background: var(--gradient-brand);
box-shadow: 0 12px 30px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.avatar-card__img,
.avatar-card__placeholder {
width: 126px; height: 126px; border-radius: 50%; display: block;
border: 3px solid var(--color-surface);
}
.avatar-card__img { object-fit: cover; background: var(--color-surface-soft); }
.avatar-card__placeholder {
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 36px; color: #fff; background: var(--gradient-brand);
}
.avatar-card__caption { font-size: 12.5px; font-weight: 600; color: var(--color-muted); text-align: center; }
.avatar-card__form { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
.avatar-drop {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 5px; padding: 28px 20px; text-align: center; cursor: pointer;
border: 1.5px dashed color-mix(in srgb, var(--color-primary) 36%, var(--color-border-strong));
border-radius: var(--radius-lg); background: var(--color-surface-alt);
transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .22s var(--ease);
}
.avatar-drop:hover,
.avatar-drop:focus-within,
.avatar-drop.is-dragover {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-alt));
box-shadow: var(--ring-soft);
}
.avatar-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.avatar-drop__icon {
width: 46px; height: 46px; margin-bottom: 5px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--color-primary); background: var(--color-primary-soft);
}
.avatar-drop__icon svg { width: 21px; height: 21px; }
.avatar-drop__title { font-size: 14px; font-weight: 700; color: var(--color-heading); }
.avatar-drop__or { font-weight: 500; color: var(--color-muted); }
.avatar-drop__hint { font-size: 12px; color: var(--color-muted); max-width: 340px; line-height: 1.5; }
.avatar-drop__file {
display: inline-flex; margin-top: 7px; padding: 6px 13px; max-width: 100%;
border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 650;
background: var(--color-primary-soft); color: var(--color-primary-dark);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar-drop__file[hidden] { display: none; }
.avatar-card__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
.card.avatar-card { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; }
.avatar-card__preview { min-width: 0; }
.avatar-card__actions .btn { flex: 1 1 auto; }
}
.avatar-crop-modal[hidden] { display: none; }
.avatar-crop-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.avatar-crop-modal__backdrop { position: absolute; inset: 0; background: rgba(7,17,31,.72); backdrop-filter: blur(9px); }
.avatar-crop-modal__dialog {
position: relative; z-index: 1; width: min(440px, 100%);
display: flex; flex-direction: column; gap: 14px; padding: 18px;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-pop);
}
.avatar-crop-modal__title { font-size: 18px; font-weight: 850; }
.avatar-crop-modal__hint { margin-top: 4px; color: var(--color-muted); font-size: 12.5px; line-height: 1.5; }
.avatar-crop__stage {
position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto;
border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-deep);
border: 1px solid rgba(255,255,255,.08);
}
.avatar-crop__stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.avatar-crop__stage canvas:active { cursor: grabbing; }
.avatar-crop__mask {
position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
box-shadow: 0 0 0 9999px rgba(7,17,31,.55), inset 0 0 0 2px rgba(255,255,255,.75);
}
.avatar-crop__zoom { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--color-muted); }
.avatar-crop__zoom input[type="range"] { flex: 1; accent-color: var(--color-primary); }
.avatar-crop-modal__actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) {
.avatar-crop-modal { padding: 10px; }
.avatar-crop-modal__dialog { padding: 14px; }
}
@keyframes avatar-fresh-in {
0% { transform: scale(.82); filter: saturate(.6); }
60% { transform: scale(1.05); }
100% { transform: none; filter: none; }
}
.avatar-card__ring.is-fresh { animation: avatar-fresh-in .42s var(--ease) both; }
.page--form > * { width: 100%; max-width: 760px; margin-inline: auto; }
.group-form { gap: 18px; padding: 22px; }
.group-form__body { display: flex; flex-direction: column; gap: 20px; }
.group-form__ident { display: flex; align-items: flex-start; gap: 16px; }
.group-form__ident-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.group-pic {
position: relative; flex: 0 0 auto;
width: 84px; height: 84px; padding: 0; gap: 0; border-radius: 50%;
border: 1px solid var(--color-border); background: var(--color-surface-alt);
overflow: hidden;
}
.group-pic .avatar-card__img,
.group-pic__img {
width: 100%; height: 100%; object-fit: cover; display: block;
border: 0; border-radius: 0;
}
.group-pic .avatar-card__placeholder,
.group-pic__letter {
display: grid; place-items: center; width: 100%; height: 100%;
border: 0; border-radius: 0;
background: var(--color-primary); color: var(--color-on-primary);
font-size: 30px; font-weight: 750;
}
.group-pic__edit {
position: absolute; inset: auto 0 0 0; height: 26px;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--color-bg-deep) 55%, transparent);
color: #fff; opacity: .85; transition: opacity .18s var(--ease), height .18s var(--ease);
}
.group-pic__edit svg { width: 15px; height: 15px; }
.group-pic:hover .group-pic__edit,
.group-pic:focus-within .group-pic__edit { opacity: 1; height: 30px; }
.group-pic.is-dragover { border-color: var(--color-primary); box-shadow: var(--ring-soft); }
.group-pic__note { line-height: 1.5; }
.group-pic__file { display: inline; margin-left: 4px; font-weight: 650; color: var(--color-primary-dark); }
.group-pic__file[hidden] { display: none; }
.checkbox--quiet { font-size: 12.5px; align-self: flex-start; }
.checkbox[hidden] { display: none; }
.group-pic__gone {
align-self: flex-start; font-size: 12.5px; font-weight: 600;
color: var(--color-warning);
}
.group-pic__gone[hidden] { display: none; }
.group-form__members { display: flex; flex-direction: column; gap: 10px; }
.group-form__section { display: flex; flex-direction: column; gap: 3px; }
.pick-list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 2px;
padding: 6px; border: 1px solid var(--color-border);
border-radius: var(--radius-lg); background: var(--color-surface-alt);
}
.pick-row {
display: flex; align-items: center; gap: 10px; min-width: 0;
padding: 7px 9px; border-radius: var(--radius-md);
font-size: 13px; color: var(--color-text); cursor: pointer;
transition: background-color .15s var(--ease);
}
.pick-row:hover { background: var(--color-surface); }
.pick-row:has(input:checked) { background: var(--color-primary-soft); }
.pick-row .checkbox__box { flex: 0 0 auto; }
.pick-row__ava { width: 30px; height: 30px; font-size: 12px; }
.pick-row__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pick-row__name {
font-weight: 650; color: var(--color-heading);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-row__role {
font-size: 11.5px; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-list--wrap .pick-row { align-items: flex-start; }
.pick-list--wrap .pick-row__role {
overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.4;
}
@media (max-width: 560px) {
.group-form { padding: 16px; }
.group-form__ident { gap: 12px; }
.group-pic { width: 68px; height: 68px; }
.group-pic__letter { font-size: 24px; }
}
.profile-id { display: flex; align-items: center; gap: 14px; }
.profile-id__avatar {
width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
background: var(--color-surface-soft);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), var(--shadow-xs);
}
.profile-id__avatar--initials {
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 16px; color: #fff; background: var(--gradient-brand);
}
.profile-id__change { font-size: 12.5px; color: var(--color-primary); }
.profile-id__change:hover { text-decoration: underline; }
.topbar__user-caret { width: 16px; height: 16px; color: var(--color-muted); }
.dropdown { position: relative; }
.dropdown-menu {
position: absolute; right: 0; top: calc(100% + 10px); width: 240px; z-index: 60;
padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface); box-shadow: var(--shadow-pop);
transform-origin: top right; animation: dropdown-in .18s var(--ease-out) both;
}
.dropdown-menu[hidden] { display: none; }
.dropdown-menu__head {
display: flex; flex-direction: column; gap: 2px; padding: 10px 11px 12px; margin-bottom: 4px;
border-bottom: 1px solid var(--color-border);
}
.dropdown-menu__head span { color: var(--color-muted); font-size: 12px; }
.dropdown-menu a,
.dropdown-menu button {
width: 100%; display: flex; align-items: center; min-height: 38px;
padding: 9px 11px; border: 0; border-radius: var(--radius-md);
background: transparent; color: var(--color-text); font: inherit; text-align: left;
}
.dropdown-menu a:hover,
.dropdown-menu button:hover { background: var(--color-surface-soft); color: var(--color-primary-dark); }
.dropdown-menu a > .badge { margin-left: auto; }
.page { padding: 28px; display: flex; flex-direction: column; gap: var(--gap-cards); }
.page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page__title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.page__subtitle { color: var(--color-muted); margin-top: 4px; font-size: 14px; }
.page__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.page__head-lead { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.page__head-lead > div { min-width: 0; }
.page-back { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; }
.page-back svg { width: 18px; height: 18px; }
.card {
position: relative;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-2xl); box-shadow: var(--shadow-card);
padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.card[hidden] { display: none; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__title { font-size: 18px; font-weight: 700; color: var(--color-heading); letter-spacing: -0.015em; }
.card__subtitle { margin: 4px 0 0; color: var(--color-muted); font-size: 14px; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--color-divider); font-size: 13px; }
.messages { display: flex; flex-direction: column; gap: 10px; }
.form-card,
.card--form { max-width: 860px; }
.card--narrow { max-width: 640px; margin-inline: auto; width: 100%; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field--full { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.auth-shell { min-height: calc(100vh * var(--vu)); display: grid; place-items: center; padding: 28px; position: relative; }
.auth-shell__toggle { position: absolute; top: 22px; right: 24px; }
.auth-card {
width: min(100%, 460px); background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-xl);
box-shadow: var(--shadow-pop); padding: 28px; display: flex; flex-direction: column; gap: 18px;
}
.auth-card__brand { display: inline-flex; align-items: center; gap: 11px; }
.auth-card__title { font-size: 26px; font-weight: 800; }
.auth-card__subtitle { color: var(--color-muted); }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-card__head { display: flex; flex-direction: column; gap: 6px; }
.auth-card__back {
display: inline-flex; align-items: center; gap: 4px;
color: var(--color-muted); font-weight: 600; font-size: 13px;
padding: 6px 10px 6px 6px; margin: -6px 0; border-radius: var(--radius-md);
transition: color .16s var(--ease), background .16s var(--ease);
}
.auth-card__back:hover { color: var(--color-text); background: var(--color-surface-soft); }
.auth-card__back svg { width: 17px; height: 17px; }
.auth-card__logout { padding-top: 4px; text-align: center; }
.auth-card__logout .link { background: transparent; border: 0; padding: 0; }
.password-rules {
padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--color-border);
background: var(--color-surface-soft);
}
.password-rules__title { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.password-rules ul { margin: 0; padding-left: 18px; color: var(--color-muted); font-size: 12.5px; }
.password-rules li + li { margin-top: 5px; }
.filters-bar {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px 14px; align-items: end; padding: 16px 18px;
}
.filters-bar .form-actions { grid-column: 1 / -1; justify-content: flex-end; }
.filters-bar > .btn { min-height: var(--control-h); }
.filters-bar__check {
display: flex; align-items: center; gap: 8px; min-height: var(--control-h);
color: var(--color-muted); font-size: 13px;
}
.filters-bar__check input { flex: none; }
.filters-bar__aside { margin: 6px 2px 0; font-size: 13px; color: var(--color-faint); }
.filters-bar__search { position: relative; }
.filters-bar__search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-faint); }
.filters-bar__search .input { padding-left: 46px; border-radius: var(--radius-pill); }
.role-badge,
.status-badge {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.role-badge--owner { background: linear-gradient(135deg, var(--color-primary-soft), var(--color-coral-soft)); color: var(--color-primary-dark); }
.role-badge--manager { background: var(--color-beige-soft); color: var(--color-primary-dark); }
.role-badge--accountant { background: var(--color-success-soft); color: var(--color-success); }
.role-badge--area_admin { background: var(--color-cyan-soft); color: var(--color-cyan); }
.role-badge--ops_assistant { background: var(--color-warning-soft); color: var(--color-warning); }
.role-badge--claims_specialist { background: var(--color-magenta-soft); color: var(--color-magenta); }
.role-badge--facility_manager { background: var(--color-violet-soft); color: var(--color-violet); }
.role-badge--custom { background: var(--color-info-soft); color: var(--color-info); }
.role-badge--employee { background: var(--color-surface-soft); color: var(--color-muted); }
.status-badge--active { background: var(--color-success-soft); color: var(--color-success); }
.status-badge--locked { background: var(--color-warning-soft); color: var(--color-warning); }
.status-badge--inactive { background: var(--color-danger-soft); color: var(--color-danger); }
.grid--detail { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); }
.grid--half { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.grid--half .map-embed,
.grid--half .map-embed__iframe,
.grid--half .yandex-reviews-widget,
.grid--half .yandex-reviews-widget__iframe { height: 480px; min-height: 480px; }
.grid--half .yandex-map-link-card,
.grid--half .yandex-empty { min-height: 480px; }
@media (max-width: 880px) {
.grid--half { grid-template-columns: 1fr; }
}
.detail-list { display: grid; gap: 0; margin: 0; container-type: inline-size; }
.detail-list > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--color-muted); font-weight: 650; }
.detail-list dd { margin: 0; min-width: 0; }
@container (max-width: 520px) {
.detail-list > div { grid-template-columns: 132px minmax(0, 1fr); gap: 10px; }
}
@container (max-width: 430px) {
.detail-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.detail-list dd .role-badge,
.detail-list dd .status-badge,
.detail-list dd .badge { max-width: 100%; white-space: normal; }
.detail-list dd > .cell-sub { display: block; margin-top: 2px; }
.danger-zone { margin-top: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--color-border)); border-radius: var(--radius-lg); background: var(--color-danger-soft); }
.danger-zone__title { font-size: 14px; font-weight: 800; margin-bottom: 12px; color: var(--color-danger); }
.action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.copy-secret-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-lg); background: var(--color-surface-soft); border: 1px solid var(--color-border); }
.copy-secret-box__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.copy-secret-box__label { display: block; color: var(--color-muted); font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.copy-secret-box__value { font-weight: 800; font-size: 16px; }
.copy-secret-box__value--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.success-mark { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--color-success); background: var(--color-success-soft); }
.success-mark svg { width: 30px; height: 30px; }
.empty-state { display: grid; place-items: center; text-align: center; gap: 11px; padding: 44px 20px; }
.empty-state--sm { padding: 24px 12px; }
.empty-state__icon { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--color-primary-soft); color: var(--color-primary-dark); }
.empty-state__icon svg { width: 31px; height: 31px; }
.empty-state__title { font-size: 17px; font-weight: 800; }
.empty-state__text { color: var(--color-muted); max-width: 360px; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.timeline__item { display: flex; gap: 11px; align-items: flex-start; }
.timeline__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.timeline__body { min-width: 0; }
.timeline__action { font-weight: 800; }
.timeline__meta { color: var(--color-muted); font-size: 12px; margin-top: 2px; }
.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foot-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-size { display: flex; align-items: center; gap: 8px; }
.page-size__label { color: var(--color-muted); font-size: 13px; white-space: nowrap; }
select.page-size__select { width: auto; min-width: 74px; padding: 6px 30px 6px 11px; font-size: 13px; }
.metrics,
.metric-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap-cards); }
.metric-grid--fit { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }
.metric-card {
position: relative; overflow: hidden;
--tile-bg: var(--color-surface);
background: var(--tile-bg); border: 1px solid var(--color-border);
border-radius: var(--radius-2xl); box-shadow: var(--shadow-card);
padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px;
transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
container-type: inline-size;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); background: color-mix(in srgb, var(--color-text) 5%, var(--tile-bg)); }
.metric-card--link {
--tile-band: color-mix(in srgb, var(--tile-tone, var(--color-primary)) 60%, #FFFFFF);
--tile-band-ink: #0D0D0E;
}
html[data-theme="dark"] .metric-card--link {
--tile-band: var(--tile-tone, var(--color-primary));
}
.metric-card--link .metric-card__label {
margin: -22px -22px 0; padding: 11px 22px; min-height: 42px;
display: flex; align-items: center;
background: var(--tile-band); color: var(--tile-band-ink);
font-size: 13px; font-weight: 700; line-height: 1.25;
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
transition: background-color .2s var(--ease);
}
.metric-card--link:has(.metric-card__value--success) { --tile-tone: var(--color-success); }
.metric-card--link:has(.metric-card__value--warning) { --tile-tone: var(--chart-amber); }
.metric-card--link:has(.metric-card__value--danger) { --tile-tone: var(--color-danger); }
.metric-card__overlay { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.metric-card__overlay::before,
.metric-card__overlay::after {
content: ""; position: absolute; top: 16px; right: 16px;
width: 40px; height: 40px; pointer-events: none;
transition: background-color .18s var(--ease), opacity .18s var(--ease);
}
.metric-card__overlay::before {
border-radius: 50%;
background: color-mix(in srgb, var(--color-text) 8%, transparent);
}
.metric-card__overlay::after {
background: var(--color-text); opacity: .78;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M8.5%207H17v8.5'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M8.5%207H17v8.5'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}
.metric-card:hover .metric-card__overlay::before {
background: color-mix(in srgb, var(--color-text) 14%, transparent);
}
.metric-card:hover .metric-card__overlay::after { opacity: 1; }
.metric-card--link.is-active .metric-card__overlay::before { background: var(--color-primary); }
.metric-card--link.is-active .metric-card__overlay::after { background: var(--color-on-primary); opacity: 1; }
.metric-card:has(> .metric-card__overlay) .metric-card__label { padding-right: 40px; }
.metric-card--link .metric-card__overlay::before,
.metric-card--link .metric-card__overlay::after {
top: 7px; right: 12px; width: 28px; height: 28px;
}
.metric-card--link .metric-card__overlay::before {
background: color-mix(in srgb, var(--tile-band-ink) 13%, transparent);
}
.metric-card--link .metric-card__overlay::after {
background: var(--tile-band-ink); opacity: .72;
-webkit-mask-size: 14px 14px; mask-size: 14px 14px;
}
.metric-card--link:hover .metric-card__overlay::before {
background: color-mix(in srgb, var(--tile-band-ink) 22%, transparent);
}
.metric-card--link.is-active .metric-card__overlay::before { background: var(--tile-band-ink); }
.metric-card--link.is-active .metric-card__overlay::after { background: var(--tile-band); opacity: 1; }
.metric-card--link .metric-card__label { padding-right: 46px; }
@container (max-width: 150px) {
.metric-card--link .metric-card__overlay::before,
.metric-card--link .metric-card__overlay::after {
top: 9px; right: 9px; width: 24px; height: 24px;
}
.metric-card--link .metric-card__overlay::after {
-webkit-mask-size: 12px 12px; mask-size: 12px 12px;
}
.metric-card--link .metric-card__label { padding-right: 38px; font-size: 12px; }
}
.metric-card--link { cursor: pointer; }
.metric-card--link:focus-within { box-shadow: var(--shadow-soft), inset 0 0 0 2px var(--color-primary); }
.metric-card--link .metric-card__overlay:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: inherit; }
.metric-card--link.is-active { --tile-bg: #F7F8FA; box-shadow: var(--shadow-soft); }
html[data-theme="light"] .metric-card--link.is-active { --tile-bg: #FFFFFF; }
html[data-theme="dark"] .metric-card--link.is-active { --tile-bg: #24252A; }
html[data-theme="dark"] .metric-card--link.is-active .metric-card__delta { color: #989AA1; }
.metric-card__icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.metric-card__icon svg { width: 28px; height: 28px; }
.metric-card__icon--primary { color: var(--color-primary); }
.metric-card__icon--success { color: var(--color-success); }
.metric-card__icon--warning { color: var(--color-warning); }
.metric-card__icon--coral { color: var(--color-coral); }
.metric-card__body { display: flex; flex-direction: column; gap: 3px; }
.metric-card__label { font-size: 14px; color: var(--color-muted); font-weight: 550; line-height: 1.3; }
.metric-card__value {
--metric-value-size: 36px;
font-size: min(
var(--metric-value-size),
max(17px, calc(100cqi / (max(1, var(--metric-value-len, 6)) * 0.62)))
);
font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
font-variant-numeric: tabular-nums;
min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
@container (max-width: 138px) { .metric-card__value { --metric-value-size: 28px; } }
@container (max-width: 100px) { .metric-card__value { --metric-value-size: 24px; } }
@container (max-width: 80px) { .metric-card__value { --metric-value-size: 20px; } }
@container (max-width: 203px) { .metric-grid--fit .metric-card__value { --metric-value-size: 28px; } }
@container (max-width: 163px) { .metric-grid--fit .metric-card__value { --metric-value-size: 24px; } }
@container (max-width: 128px) { .metric-grid--fit .metric-card__value { --metric-value-size: 20px; } }
.metric-card > .metric-card__value { margin-top: auto; }
.metric-card__delta {
display: inline-flex; align-self: flex-start;
padding: 4px 10px; border-radius: var(--radius-pill);
font-size: 13px; font-weight: 700; line-height: 1.4;
color: var(--color-muted); font-variant-numeric: tabular-nums;
}
.metric-card__delta--primary { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.metric-card__delta--success { background: var(--color-success-soft); color: var(--color-success); }
.metric-card__delta--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.metric-card__delta--coral { background: var(--color-coral-soft); color: var(--color-coral); }
.grid { display: grid; gap: 18px; }
.grid--charts { grid-template-columns: 1.55fr 1fr 1fr; }
.grid--bottom { grid-template-columns: 1.7fr 1fr 1fr; }
.chart-card { min-height: 320px; }
.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-muted); }
.chart-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 12px; height: 4px; border-radius: 3px; display: inline-block; }
.dot--primary { background: var(--color-primary); }
.dot--coral { background: var(--color-coral); }
.dot--dashed { background: repeating-linear-gradient(90deg, var(--color-beige) 0 4px, transparent 4px 7px); }
.linechart,
.line-chart { display: flex; flex-direction: column; gap: 8px; }
.linechart svg,
.line-chart svg { width: 100%; height: 210px; overflow: visible; }
.linechart__grid { stroke: var(--color-border); stroke-width: 1; opacity: .55; }
.linechart__plan { stroke: var(--color-beige); stroke-width: 2; stroke-dasharray: 6 6; }
.linechart__line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.linechart__line--primary { stroke: var(--color-primary); }
.linechart__line--coral { stroke: var(--color-coral); }
.linechart__axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--color-muted); }
.donut-block { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut,
.donut-chart,
.kpi-ring { position: relative; width: 168px; height: 168px; flex: 0 0 auto; }
.donut--sm { width: 150px; height: 150px; }
.donut svg,
.donut-chart svg,
.kpi-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut__track { fill: none; stroke: var(--color-surface-soft); stroke-width: 20; }
.donut__seg { fill: none; stroke-width: 20; stroke-linecap: round; }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.donut__center strong { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.donut__center span { font-size: 12px; color: var(--color-muted); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 130px; }
.donut-legend__item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-legend .dot { width: 11px; height: 11px; border-radius: 50%; }
.donut-legend__value { font-weight: 800; }
.donut-legend__pct { color: var(--color-muted); font-size: 12px; }
.donut-legend__label { color: var(--color-muted); margin-left: auto; }
.kpi-block { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kpi-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; flex: 1; min-width: 180px; }
.kpi-bars__row { display: grid; grid-template-columns: 1fr 90px auto; align-items: center; gap: 10px; font-size: 13px; }
.kpi-bars__label { color: var(--color-muted); }
.kpi-bars__track { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-soft); overflow: hidden; }
.kpi-bars__fill { display: block; width: var(--w, 0); height: 100%; border-radius: inherit; }
.kpi-bars__fill--primary { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); }
.kpi-bars__fill--coral { background: linear-gradient(90deg, var(--color-coral), color-mix(in srgb, var(--color-coral) 60%, #fff)); }
.kpi-bars__value { font-weight: 800; min-width: 38px; text-align: right; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-muted); font-size: 13px; font-weight: 650; line-height: 1; transition: all .18s var(--ease); }
.chip b { color: var(--color-text); }
.chip.is-active { background: var(--color-heading); color: var(--color-surface); }
.chip.is-active b { color: var(--color-surface); }
.list-live { transition: opacity .12s var(--ease); }
.list-live.htmx-request { opacity: .5; transition: opacity .2s var(--ease) .25s; }
.list-live.htmx-request .table-wrap { pointer-events: none; }
.list-live--stack { display: flex; flex-direction: column; gap: 20px; }
.card.htmx-request,
.table-wrap.htmx-request { opacity: .5; transition: opacity .2s var(--ease) .25s; }
.card.htmx-request .table-wrap { pointer-events: none; }
.table-wrap {
overflow-x: auto; border-radius: var(--radius-lg);
background-image:
linear-gradient(to right, var(--color-surface), transparent),
linear-gradient(to left, var(--color-surface), transparent),
linear-gradient(to right, rgba(0, 0, 0, 0.30), transparent),
linear-gradient(to left, rgba(0, 0, 0, 0.30), transparent);
background-position: left center, right center, left center, right center;
background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
}
html[data-theme="light"] .table-wrap {
background-image:
linear-gradient(to right, var(--color-surface), transparent),
linear-gradient(to left, var(--color-surface), transparent),
linear-gradient(to right, rgba(12, 14, 18, 0.16), transparent),
linear-gradient(to left, rgba(12, 14, 18, 0.16), transparent);
}
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th {
text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
color: var(--color-faint); font-weight: 700; padding: 12px 10px;
background: transparent; border-bottom: 1px solid var(--color-divider);
white-space: normal; line-height: 1.25; vertical-align: bottom;
text-wrap: balance;
}
.table--sticky thead th { background: var(--color-surface); }
.table tbody td { padding: 18px 10px; border-top: 1px solid var(--color-divider); vertical-align: middle; }
.table tbody td:has(> .cell-sub) { padding-top: 13px; padding-bottom: 13px; }
.table tbody td:has(> .btn),
.table tbody td:has(> .row-actions),
.table tbody td:has(> form .btn) { padding-top: 11px; padding-bottom: 11px; }
.table tbody td:last-child.ta-right { white-space: nowrap; }
.table tbody tr[data-row-href] .row-actions .btn-secondary {
background: transparent; border-color: transparent; box-shadow: none;
color: var(--color-primary-dark); font-weight: 650;
}
.table tbody tr[data-row-href]:hover .row-actions .btn-secondary {
background: var(--color-primary-soft); border-color: transparent;
color: var(--color-primary-dark); transform: none;
}
.table tbody td:last-child.ta-right > .btn + .btn,
.table tbody td:last-child.ta-right > .btn + form,
.table tbody td:last-child.ta-right > form + .btn,
.table tbody td:last-child.ta-right > form + form { margin-left: 6px; }
.table tbody td:first-child { font-weight: 650; }
.table tbody td > .cell-sub { display: block; margin-top: 1px; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr { transition: background-color .14s var(--ease); }
.table tbody tr:hover > td { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.table--sticky thead th { position: sticky; top: 0; z-index: 2; }
.ta-right { text-align: right; }
.table thead th.ta-right { text-align: right; }
.table thead th.th-sort { padding: 0; }
.th-sort__link {
display: inline-flex; align-items: center; gap: 5px; width: 100%;
padding: 12px 10px; color: inherit; font: inherit; text-decoration: none;
letter-spacing: inherit; text-transform: inherit; cursor: pointer;
border: 0; background: transparent; text-align: inherit;
}
.table thead th.th-sort.ta-right .th-sort__link { justify-content: flex-end; }
.th-sort__link:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.th-sort__icon { width: 13px; height: 13px; flex: none; opacity: 0; transition: opacity .12s var(--ease); }
.th-sort__link:hover .th-sort__icon { opacity: .45; }
.table thead th.th-sort.is-sorted { color: var(--color-text); }
.table thead th.th-sort.is-sorted .th-sort__icon { opacity: 1; color: var(--color-primary); }
@media (hover: none) {
.th-sort__icon { opacity: .35; }
}
.table thead th.th-wrap { white-space: normal; min-width: 110px; }
.table td.cell-clip {
max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table--dense { font-size: 13px; }
.table--dense thead th { font-size: 11px; letter-spacing: .02em; padding-left: 8px; padding-right: 8px; }
.table--dense .th-sort__link { padding-left: 8px; padding-right: 8px; }
.table--dense tbody td { padding-left: 8px; padding-right: 8px; }
.table--dense td.cell-clip { max-width: 170px; }
.table--dense .table-cell-address { min-width: 0; max-width: 220px; }
.table--pin-first thead th:first-child,
.table--pin-first tbody td:first-child {
position: sticky; left: 0; z-index: 3;
background-color: var(--color-surface);
box-shadow: 1px 0 0 var(--color-divider);
}
.table--pin-first tbody tr:hover > td:first-child {
background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.table--pin-first.table--sticky thead th:first-child { z-index: 5; }
.table-wrap:not(.is-scrolled) .table--pin-first thead th:first-child,
.table-wrap:not(.is-scrolled) .table--pin-first tbody td:first-child { box-shadow: none; }
.table-hscroll {
position: sticky; bottom: 0; z-index: 6;
height: 16px; margin-top: -10px;
background: var(--color-surface);
cursor: pointer; touch-action: none;
}
.table-hscroll::before {
content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 5px;
border-radius: var(--radius-pill); background: var(--color-surface-soft);
}
.table-hscroll__thumb {
position: absolute; top: 4px; height: 9px; min-width: 40px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-muted) 45%, transparent);
transition: background-color .14s var(--ease);
}
.table-hscroll:hover .table-hscroll__thumb { background: color-mix(in srgb, var(--color-muted) 70%, transparent); }
.table-hscroll.is-dragging .table-hscroll__thumb { background: var(--color-primary); }
body.is-hscroll-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.table-wrap.has-hscroll { scrollbar-width: none; }
.table-wrap.has-hscroll::-webkit-scrollbar { height: 0; }
.table tbody td.pvz-rate-cell:last-child { white-space: normal; }
.table th.is-col-off,
.table td.is-col-off { display: none; }
.table-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.colpick { position: relative; }
.colpick > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.colpick > summary::-webkit-details-marker { display: none; }
.colpick > summary::marker { content: ""; }
.colpick__count { font-variant-numeric: tabular-nums; color: var(--color-muted); font-weight: 600; }
.colpick[open] > summary .colpick__count { color: inherit; }
.colpick__pop {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 12;
min-width: 250px; max-width: min(330px, 80vw);
max-height: 60vh; overflow-y: auto;
padding: 12px; border-radius: var(--radius-lg);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-pop);
display: flex; flex-direction: column; gap: 8px;
text-align: left; text-transform: none; letter-spacing: normal;
}
.colpick__note { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--color-muted); }
.colpick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.colpick__item {
display: flex; align-items: center; gap: 8px; cursor: pointer;
padding: 5px 6px; border-radius: 8px; font-size: 13px;
}
.colpick__item:hover { background: var(--color-surface-soft); }
.colpick__item input:disabled { cursor: default; }
.colpick__item input:disabled + span { color: var(--color-faint); }
.colpick__all { align-self: flex-start; }
.nb { white-space: nowrap; }
.cell-strong { font-weight: 700; }
.cell-sub { font-size: 12px; color: var(--color-faint); font-weight: 500; line-height: 1.35; }
.cell-muted { color: var(--color-muted); }
.cell-overdue { font-weight: 700; color: var(--color-coral); }
.cell-icon { display: inline-flex; vertical-align: middle; margin-right: 7px; }
.cell-icon svg { width: 16px; height: 16px; }
.cell-icon--warning { color: var(--color-warning); }
.cell-icon--danger { color: var(--color-danger); }
.cell-icon--info { color: var(--color-primary-dark); }
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rank-list__item { display: grid; grid-template-columns: 26px 1fr 84px auto; align-items: center; gap: 12px; }
.rank-list__num { width: 26px; height: 26px; border-radius: 8px; background: var(--color-surface-soft); color: var(--color-muted); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.rank-list__item--low .rank-list__num { background: var(--color-coral-soft); color: var(--color-coral); }
.rank-list__track { height: 7px; border-radius: var(--radius-pill); background: var(--color-surface-soft); overflow: hidden; }
.rank-list__fill { display: block; width: var(--w, 0); height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); border-radius: inherit; }
.rank-list__fill--coral { background: linear-gradient(90deg, var(--color-coral), color-mix(in srgb, var(--color-coral) 60%, #fff)); }
.rank-list__value { font-weight: 800; min-width: 40px; text-align: right; }
.rank-list__divider { height: 1px; background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px); margin: 2px 0; }
.stat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stat-list__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--color-border); font-size: 13.5px; }
.stat-list__item:last-child { border-bottom: 0; }
.stat-list__label { color: var(--color-muted); }
.stat-list__value { font-weight: 800; font-size: 16px; }
.stat-list__value--warning { color: var(--color-warning); }
.stat-list__value--coral { color: var(--color-coral); }
.stat-list__value--primary { color: var(--color-primary-dark); }
.stat-list__value--muted { color: var(--color-muted); }
.signin {
--signin-panel:
radial-gradient(60% 45% at 78% 18%, rgba(255, 255, 255, .55), transparent 70%),
radial-gradient(70% 55% at 12% 90%, rgba(0, 91, 255, .08), transparent 70%),
linear-gradient(135deg, #E1E6F1 0%, #D3DAEA 52%, #C6CFE3 100%);
--signin-top: #FFFFFF;
--signin-grid: rgba(30, 42, 72, .07);
position: relative;
min-height: calc(100vh * var(--vu));
min-height: calc(100dvh * var(--vu));
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
background: var(--color-surface);
isolation: isolate;
}
html[data-theme="dark"] .signin {
--signin-panel:
radial-gradient(60% 45% at 78% 18%, rgba(91, 140, 255, .1), transparent 70%),
radial-gradient(70% 55% at 12% 90%, rgba(255, 138, 107, .06), transparent 70%),
linear-gradient(135deg, #1E2029 0%, #181A21 52%, #121318 100%);
--signin-top: #0D0D0E;
--signin-grid: rgba(255, 255, 255, .06);
}
.signin__toggle { position: absolute; top: 22px; right: 24px; z-index: 5; }
.signin__stage {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding: 40px 48px;
overflow: hidden;
background: var(--signin-panel);
}
.signin__brand { display: inline-flex; }
.signin__logo { height: 48px; width: auto; max-width: 220px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(12, 14, 18, .18)); }
.signin__stage .crew { align-self: center; }
.signin__stage-end { height: 48px; }
.crew {
--k: 1.28;
--crew-kraft: #E4AB68;
--crew-kraft-deep: #CD8E4C;
--crew-tape: rgba(251, 228, 188, .92);
--crew-blue: #2F6BFF;
--crew-blue-deep: #1F55DB;
--crew-sand: #F3E3C4;
--crew-coral: #FF8A6B;
--crew-coral-deep: #E96E50;
--crew-locker: #005BFF;
--crew-screen: #08183F;
--crew-led: #7FD4FA;
--crew-alarm: #E53950;
--crew-warn: #FFB020;
--crew-zzz: #6A7898;
--crew-eye: #FFFFFF;
--crew-pupil: #1E2029;
--crew-ease: cubic-bezier(.45, .05, .35, 1);
position: relative;
flex: none;
width: calc(556px * var(--k));
height: calc(380px * var(--k));
}
html[data-theme="dark"] .crew {
--crew-blue: #3D7DFF;
--crew-blue-deep: #2B63E6;
--crew-locker: #3D7DFF;
--crew-screen: #061030;
--crew-pupil: #14151A;
--crew-zzz: #97A3C2;
}
.crew__scene {
position: absolute;
left: 0;
bottom: 0;
width: 556px;
height: 380px;
transform: scale(var(--k));
transform-origin: 0 100%;
}
.crew__scene::after {
content: "";
position: absolute;
left: -10px;
right: -10px;
bottom: -14px;
height: 28px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(12, 14, 18, .16), transparent);
z-index: -1;
}
.crew__backdrop,
.crew__floor {
position: absolute;
left: -900px;
width: calc(100% + 1800px);
z-index: -2;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 38%, #000 62%, transparent 82%);
mask-image: linear-gradient(90deg, transparent 18%, #000 38%, #000 62%, transparent 82%);
}
.crew__backdrop {
bottom: 56px;
height: 300px;
opacity: .5;
filter: blur(1.2px);
}
.crew__post { fill: #A9B3C9; }
.crew__box--kraft { fill: #D8BE98; }
.crew__box--blue { fill: #97AEE0; }
.crew__box--sand { fill: #E6DCC8; }
.crew__box--coral { fill: #E7B2A2; }
.crew__floor {
top: calc(100% - 56px);
height: 520px;
background:
linear-gradient(180deg, rgba(120, 132, 160, .28) 0 2px, rgba(120, 132, 160, .14) 2px, transparent 75%);
}
html[data-theme="dark"] .crew__backdrop { opacity: .38; }
html[data-theme="dark"] .crew__post { fill: #4A5266; }
html[data-theme="dark"] .crew__box--kraft { fill: #7C6647; }
html[data-theme="dark"] .crew__box--blue { fill: #3E5890; }
html[data-theme="dark"] .crew__box--sand { fill: #7D7564; }
html[data-theme="dark"] .crew__box--coral { fill: #85574A; }
html[data-theme="dark"] .crew__floor {
background:
linear-gradient(180deg, rgba(150, 165, 200, .16) 0 2px, rgba(150, 165, 200, .06) 2px, transparent 75%);
}
.crew__mate {
--h: 100;
--stretch: 0;
--skew: 0;
--fx: 0;
--fy: 0;
--px: 0;
--py: 0;
--mx: 0;
--my: 0;
--lid: 1;
position: absolute;
bottom: 0;
height: calc((var(--h) + var(--stretch)) * 1px);
transform: skewX(calc(var(--skew) * 1deg));
transform-origin: 50% 100%;
transition: transform .7s var(--crew-ease), height .7s var(--crew-ease);
}
.crew__scene:not(.is-settled) .crew__mate { animation: crew-rise .8s var(--ease-out) backwards; }
.crew__mate .crew__mate {
bottom: 100%;
box-shadow: 0 3px 3px -2px rgba(12, 14, 18, .3);
}
.crew__face {
position: absolute;
display: flex;
transform: translate(calc(var(--fx) * 1px), calc(var(--fy) * 1px));
transition: transform .7s var(--crew-ease), rotate .4s var(--ease);
}
.crew__mouth {
--mr: 0;
position: absolute;
transform: translate(calc(var(--mx) * 1px), calc(var(--my) * 1px)) rotate(calc(var(--mr) * 1deg));
transition: transform .7s var(--crew-ease), scale .25s var(--ease);
}
.crew__smile { border: 3px solid var(--crew-pupil); border-top: 0; border-radius: 0 0 14px 14px; }
.crew__eye {
display: grid;
place-items: center;
width: var(--eye, 20px);
height: var(--eye, 20px);
border-radius: 50%;
background: var(--crew-eye);
overflow: hidden;
scale: 1 var(--lid);
transition: scale .1s ease;
}
.crew__pupil {
width: var(--pupil, 8px);
height: var(--pupil, 8px);
border-radius: 50%;
background: var(--crew-pupil);
transform: translate(calc(var(--px) * 1px), calc(var(--py) * 1px));
transition: transform .12s ease-out, opacity .2s ease, scale .25s var(--ease);
}
.crew__mate--kraft {
--h: 160;
--eye: 28px;
--pupil: 11px;
left: 0;
width: 220px;
z-index: 3;
border-radius: 7px 0 0 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--crew-kraft) 90%, #fff), var(--crew-kraft) 40%, color-mix(in srgb, var(--crew-kraft) 92%, #000));
animation-delay: .05s;
}
.crew__tape {
position: absolute;
left: calc(50% - 20px);
top: 0;
width: 40px;
height: 58px;
background: var(--crew-tape);
}
.crew__mate--kraft > .crew__sticker { right: 12px; bottom: 10px; width: 56px; height: 36px; transform: rotate(-2deg); }
.crew__mate--kraft > .crew__face { left: 58px; top: 58px; gap: 48px; }
.crew__mate--kraft > .crew__mouth { left: 97px; top: 102px; width: 26px; height: 13px; }
.crew__flap {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 40px;
border-radius: 7px 0 3px 3px;
background:
linear-gradient(90deg, transparent calc(50% - 20px), var(--crew-tape) 0 calc(50% + 20px), transparent 0),
var(--crew-kraft-deep);
box-shadow: 0 3px 0 rgba(12, 14, 18, .1);
transition: transform .45s var(--crew-ease);
}
.crew__mate--sand {
--h: 120;
--eye: 18px;
--pupil: 8px;
left: 120px;
width: 190px;
border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--crew-sand) 70%, #fff), var(--crew-sand) 45%);
animation-delay: .25s;
}
.crew__stripes {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 14px;
border-radius: 6px 6px 0 0;
background: repeating-linear-gradient(-45deg, var(--crew-alarm) 0 7px, #fff 7px 14px);
}
.crew__glass { position: absolute; right: 14px; bottom: 12px; width: 20px; height: 27px; fill: var(--crew-alarm); }
.crew__mate--sand > .crew__face { left: 64px; top: 36px; gap: 26px; }
.crew__mate--sand > .crew__mouth { left: 83px; top: 66px; width: 24px; height: 12px; }
.crew__mate--cube {
--h: 84;
--eye: 16px;
--pupil: 7px;
left: 50px;
width: 90px;
border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--crew-coral) 85%, #fff), var(--crew-coral) 40%);
animation-delay: .35s;
}
.crew__cross {
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(90deg, transparent calc(50% - 8px), rgba(255, 255, 255, .45) 0 calc(50% + 8px), transparent 0) 0 0 / 100% 22px no-repeat;
}
.crew__mate--cube > .crew__face { left: 21px; top: 26px; gap: 16px; }
.crew__mouth--o {
left: 40px;
top: 54px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--crew-pupil);
}
.crew__mate--blue {
--h: 160;
--eye: 24px;
--pupil: 10px;
left: 226px;
width: 168px;
z-index: 2;
border-radius: 0 7px 0 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--crew-blue) 86%, #fff), var(--crew-blue) 35%);
animation-delay: .15s;
}
.crew__band {
position: absolute;
left: 0;
right: 0;
top: 22px;
height: 14px;
background: var(--crew-blue-deep);
}
.crew__mate--blue > .crew__face { left: 40px; top: 52px; gap: 40px; }
.crew__mate--blue > .crew__mouth {
left: 67px;
top: 98px;
width: 34px;
height: 5px;
border-radius: 3px;
background: var(--crew-pupil);
}
.crew__sticker {
position: absolute;
border-radius: 4px;
background:
linear-gradient(#9AA1AE, #9AA1AE) 14% 26% / 58% 3px no-repeat,
linear-gradient(#9AA1AE, #9AA1AE) 14% 52% / 72% 3px no-repeat,
linear-gradient(#9AA1AE, #9AA1AE) 14% 78% / 40% 3px no-repeat,
#FFFDF8;
transform: rotate(-3deg);
}
.crew__mate--locker {
--h: 320;
left: 414px;
width: 132px;
z-index: 1;
border-radius: 16px 16px 0 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--crew-locker) 86%, #fff), var(--crew-locker) 20%);
animation-delay: .2s;
}
.crew__screen {
position: absolute;
left: 12px;
top: 20px;
width: 108px;
height: 60px;
border-radius: 12px;
background: radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--crew-screen) 70%, #2a4a9a), var(--crew-screen));
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .16);
overflow: hidden;
}
.crew__mate--locker .crew__face { left: 27px; top: 14px; gap: 26px; }
.crew__led {
width: 14px;
height: 19px;
border-radius: 6px;
background: var(--crew-led);
box-shadow: 0 0 10px color-mix(in srgb, var(--crew-led) 70%, transparent);
transform: translate(calc(var(--px) * 1px), calc(var(--py) * 1px));
scale: 1 var(--lid);
transition: transform .12s ease-out, scale .12s ease;
}
.crew__mate--locker .crew__mouth {
left: 45px;
top: 40px;
width: 18px;
height: 9px;
border-color: var(--crew-led);
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--crew-led) 60%, transparent));
}
.crew__cells {
position: absolute;
left: 12px;
right: 12px;
top: 92px;
bottom: 0;
border: 2px solid rgba(255, 255, 255, .2);
border-bottom: 0;
border-radius: 7px 7px 0 0;
background:
radial-gradient(circle at calc(50% - 9px) 20px, rgba(255, 255, 255, .45) 0 2.5px, transparent 3.2px) 0 0 / 100% 42px repeat-y,
radial-gradient(circle at calc(50% + 9px) 20px, rgba(255, 255, 255, .45) 0 2.5px, transparent 3.2px) 0 0 / 100% 42px repeat-y,
linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .2) 0 calc(50% + 1px), transparent 0),
repeating-linear-gradient(180deg, transparent 0 40px, rgba(255, 255, 255, .2) 40px 42px);
}
.crew__door {
position: absolute;
left: 14px;
top: 136px;
width: 52px;
height: 40px;
background: #0A1E5C;
perspective: 160px;
}
.crew__door::before {
content: "";
position: absolute;
left: 13px;
bottom: 5px;
width: 24px;
height: 18px;
border-radius: 2px;
background: linear-gradient(90deg, transparent 10px, var(--crew-tape) 0 14px, transparent 0), var(--crew-kraft);
}
.crew__door::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 43px 20px, rgba(255, 255, 255, .45) 0 2.5px, transparent 3.2px),
var(--crew-locker);
transform-origin: 0 50%;
transition: transform .4s var(--crew-ease);
}
.crew__mate--sand > .crew__blush { left: 56px; right: 56px; top: 56px; }
.crew__mate--blue > .crew__sticker { right: 8px; bottom: 6px; width: 46px; height: 26px; transform: rotate(3deg); }
.crew__blush {
position: absolute;
height: 11px;
opacity: 0;
background:
radial-gradient(closest-side, rgba(255, 110, 140, .75), transparent) 0 0 / 24px 11px no-repeat,
radial-gradient(closest-side, rgba(255, 110, 140, .75), transparent) 100% 0 / 24px 11px no-repeat;
transform: translate(calc(var(--fx) * 1px), calc(var(--fy) * 1px));
transition: opacity .4s var(--ease), transform .7s var(--crew-ease);
}
.crew.is-sad .crew__smile { --mr: 180; }
.crew.is-sad .crew__mate--blue > .crew__mouth { --mr: -10; }
.crew.is-shaking .crew__face,
.crew.is-shaking .crew__mouth { animation: crew-shake .8s cubic-bezier(.36, .07, .19, .97) both; }
.crew__sign {
position: absolute;
right: -12px;
top: -16px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--crew-warn);
color: #3B2300;
font-size: 19px;
font-weight: 900;
line-height: 1;
box-shadow: 0 5px 12px -5px rgba(12, 14, 18, .45);
scale: 0;
transition: scale .35s cubic-bezier(.34, 1.56, .64, 1);
pointer-events: none;
}
.crew__sign::before { content: "!"; }
.crew.is-alert .crew__sign,
.crew.is-puzzled .crew__sign { scale: 1; }
.crew.is-puzzled .crew__sign { background: #FFFFFF; color: var(--crew-locker); }
.crew.is-puzzled .crew__sign::before { content: "?"; }
.crew.is-alert .crew__mate--locker { --crew-led: var(--crew-warn); }
.crew.is-alert .crew__screen { animation: crew-alarm .5s ease-in-out 2; }
.crew.is-puzzled .crew__face { rotate: -9deg; }
.crew.is-puzzled .crew__mouth { --mr: -12; }
.crew.is-asleep .crew__eye {
height: calc(var(--eye, 20px) * .45);
margin-top: calc(var(--eye, 20px) * .3);
scale: 1;
background: transparent;
border: calc(var(--eye, 20px) * .14) solid var(--crew-pupil);
border-top: 0;
border-radius: 0 0 99px 99px;
}
.crew.is-asleep .crew__pupil { opacity: 0; }
.crew.is-asleep .crew__led { height: 4px; margin-top: 9px; scale: 1; opacity: .55; box-shadow: none; }
.crew.is-asleep .crew__face,
.crew.is-asleep .crew__mouth,
.crew.is-asleep .crew__blush { animation: crew-breathe 3.4s ease-in-out infinite; }
.crew.is-asleep .crew__mouth--o { animation: crew-breathe 3.4s ease-in-out infinite, crew-snore 3.4s ease-in-out infinite; }
.crew__zzz {
position: absolute;
left: 518px;
bottom: 318px;
color: var(--crew-zzz);
pointer-events: none;
}
.crew__zzz i {
position: absolute;
left: 0;
bottom: 0;
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 1;
opacity: 0;
}
.crew.is-asleep .crew__zzz i { animation: crew-zzz 3.6s ease-in infinite; }
.crew.is-asleep .crew__zzz i:nth-child(2) { animation-delay: 1.2s; }
.crew.is-asleep .crew__zzz i:nth-child(3) { animation-delay: 2.4s; }
.crew.is-startled .crew__mate--cube { animation: crew-jump .8s var(--crew-ease); }
.crew.is-startled .crew__mate--locker { animation: crew-squish .8s var(--crew-ease); }
.crew.is-startled .crew__face { animation: crew-startle .5s var(--ease); }
.crew.is-startled .crew__pupil { scale: .7; }
.crew__mate.is-wave > .crew__face,
.crew__mate.is-wave > .crew__mouth,
.crew__mate--locker.is-wave .crew__face,
.crew__mate--locker.is-wave .crew__mouth { animation: crew-startle .45s var(--ease); }
.crew__mate.is-wave > .crew__face .crew__eye,
.crew__mate--locker.is-wave .crew__led { animation: crew-wink .45s var(--ease); }
.crew__mate--cube.is-hop { animation: crew-jump .8s var(--crew-ease); }
.crew__mate { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.crew__mate--blue.is-poked > .crew__face { animation: crew-sway .9s var(--ease); }
.crew__mate--blue.is-poked > .crew__face .crew__pupil { animation: crew-orbit .45s linear 2; }
.crew__mate--blue.is-poked > .crew__mouth { animation: crew-wave .9s var(--ease); }
.crew__mate--locker.is-poked { animation: crew-squish .8s var(--crew-ease); }
.crew__mate--locker.is-poked .crew__door::after { transform: rotateY(-76deg); }
.crew__mate--locker.is-poked .crew__led {
height: 9px;
margin-top: 6px;
border-radius: 10px 10px 0 0;
background: transparent;
border: 3px solid var(--crew-led);
border-bottom: 0;
}
.crew__mate--cube.is-poked { animation: crew-jump .8s var(--crew-ease); }
.crew__mate--cube.is-poked > .crew__face .crew__eye {
height: 8px;
margin-top: 6px;
border-radius: 16px 16px 0 0;
background: transparent;
border: 3px solid var(--crew-pupil);
border-bottom: 0;
}
.crew__mate--kraft.is-poked > .crew__face .crew__eye {
height: 14px;
margin-top: 10px;
border-radius: 28px 28px 0 0;
background: transparent;
border: 4px solid var(--crew-pupil);
border-bottom: 0;
}
.crew__mate--kraft.is-poked > .crew__mouth { height: 18px; background: var(--crew-pupil); }
.crew__mate--kraft.is-poked > .crew__face,
.crew__mate--kraft.is-poked > .crew__mouth { animation: crew-giggle .8s var(--ease); }
.crew__mate--sand.is-poked > .crew__face .crew__eye:first-child {
height: 8px;
margin-top: 6px;
border-radius: 18px 18px 0 0;
background: transparent;
border: 3px solid var(--crew-pupil);
border-bottom: 0;
}
.crew__mate--sand.is-poked > .crew__blush { opacity: 1; }
.crew__mate--sand.is-poked > .crew__face,
.crew__mate--sand.is-poked > .crew__mouth { animation: crew-tilt .8s var(--ease); }
.crew__mate.is-poked > .crew__face .crew__eye .crew__pupil { transition-duration: .12s; }
.crew__mate--cube.is-poked > .crew__face .crew__pupil,
.crew__mate--kraft.is-poked > .crew__face .crew__pupil,
.crew__mate--sand.is-poked > .crew__face .crew__eye:first-child .crew__pupil { opacity: 0; }
@keyframes crew-jump {
0%, 100% { translate: 0 0; scale: 1 1; }
15% { translate: 0 0; scale: 1.08 .86; }
40% { translate: 0 -46px; scale: .94 1.08; }
58% { translate: 0 -52px; scale: 1 1; }
78% { translate: 0 0; scale: 1.08 .88; }
90% { translate: 0 -6px; scale: .98 1.02; }
}
@keyframes crew-orbit {
0%, 100% { translate: 5px 0; }
25% { translate: 0 5px; }
50% { translate: -5px 0; }
75% { translate: 0 -5px; }
}
@keyframes crew-sway {
0%, 100% { translate: 0 0; }
25% { translate: -5px 0; }
75% { translate: 5px 0; }
}
@keyframes crew-wave {
0%, 100% { rotate: 0deg; }
20% { rotate: -14deg; }
45% { rotate: 12deg; }
70% { rotate: -8deg; }
}
@keyframes crew-squish {
0%, 100% { scale: 1 1; }
18% { scale: 1.1 .84; }
40% { scale: .92 1.08; }
60% { scale: 1.05 .95; }
80% { scale: .98 1.02; }
}
@keyframes crew-giggle {
0%, 100% { translate: 0 0; }
20% { translate: 0 -5px; }
40% { translate: 0 1px; }
60% { translate: 0 -4px; }
80% { translate: 0 0; }
}
@keyframes crew-tilt {
0%, 100% { rotate: 0deg; }
25%, 75% { rotate: -8deg; }
}
@keyframes crew-alarm {
50% { box-shadow: inset 0 0 0 3px var(--crew-warn), 0 0 18px color-mix(in srgb, var(--crew-warn) 60%, transparent); }
}
@keyframes crew-breathe {
0%, 100% { translate: 0 0; }
50% { translate: 0 2px; }
}
@keyframes crew-snore {
0%, 100% { scale: .55; }
50% { scale: .85; }
}
@keyframes crew-zzz {
0% { opacity: 0; translate: 0 0; scale: .6; }
20% { opacity: 1; }
100% { opacity: 0; translate: 26px -48px; scale: 1.25; }
}
@keyframes crew-startle {
0%, 100% { translate: 0 0; }
30% { translate: 0 -7px; }
60% { translate: 0 1px; }
}
@keyframes crew-wink {
0%, 100% { scale: 1 1; }
35% { scale: 1 .1; }
}
@keyframes crew-rise {
from { translate: 0 30px; scale: 1 .7; opacity: 0; }
}
@keyframes crew-shake {
0%, 100% { translate: 0 0; }
10% { translate: -9px 0; }
20% { translate: 7px 0; }
30% { translate: -6px 0; }
40% { translate: 5px 0; }
50% { translate: -4px 0; }
60% { translate: 3px 0; }
70% { translate: -2px 0; }
80% { translate: 1px 0; }
90% { translate: -.5px 0; }
}
.signin__main {
position: relative;
display: grid;
place-items: center;
padding: 64px 48px;
background: var(--color-surface);
}
.signin__main::before,
.signin__main::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.signin__main::before {
background:
radial-gradient(50% 40% at 100% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%),
radial-gradient(45% 35% at 0% 100%, rgba(255, 138, 107, .08), transparent 70%);
}
.signin__main::after {
background-image:
linear-gradient(var(--signin-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--signin-grid) 1px, transparent 1px);
background-size: 32px 32px;
background-position: center;
-webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 45%, #000 100%);
mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 45%, #000 100%);
}
.signin__panel { position: relative; z-index: 1; width: 100%; max-width: 440px; }
.signin__title { font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--color-heading); text-align: center; }
.signin__subtitle { margin-top: 10px; font-size: 16px; color: var(--color-muted); text-align: center; }
.signin__alert {
margin-top: 26px;
padding: 12px 16px;
border-radius: 12px;
font-size: 14.5px;
line-height: 1.4;
color: var(--color-danger);
background: color-mix(in srgb, var(--color-danger) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--color-danger) 24%, transparent);
}
.signin__alert.is-fresh { animation: signin-alert-in .5s var(--ease-out); }
@keyframes signin-alert-in {
0% { opacity: 0; transform: translateY(-6px); }
45% { opacity: 1; transform: translateX(-6px); }
65% { transform: translateX(5px); }
85% { transform: translateX(-2px); }
100% { transform: none; }
}
.signin__form { display: flex; flex-direction: column; gap: 26px; margin-top: 40px; }
.signin__field { display: flex; flex-direction: column; }
.signin__label { font-size: 15px; font-weight: 650; color: var(--color-text); transition: color .2s var(--ease); }
.signin__control { position: relative; display: block; }
.signin__input {
display: block;
width: 100%;
height: 56px;
padding: 0 2px;
border: 0;
border-bottom: 1.5px solid var(--color-border-strong);
border-radius: 0;
background: transparent;
color: var(--color-heading);
font: inherit;
font-size: 17px;
transition: border-color .2s var(--ease);
}
.signin__input--password { padding-right: 48px; }
.signin__input::placeholder { color: var(--color-faint); opacity: .75; }
.signin__input:hover { border-bottom-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border-strong)); }
.signin__input:focus { outline: none; border-bottom: 2px solid var(--color-primary); }
.signin__input:focus-visible { box-shadow: none; }
.signin__input:-webkit-autofill,
.signin__input:-webkit-autofill:hover,
.signin__input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color-heading);
box-shadow: inset 0 0 0 100px var(--color-surface);
caret-color: var(--color-heading);
}
.signin__field.is-invalid .signin__label { color: var(--color-danger); }
.signin__field.is-invalid .signin__input { border-bottom-color: var(--color-danger); }
.signin__field .form-error { margin-top: 7px; }
.signin__eye { right: -6px; border-radius: 50%; }
.signin__warn {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 9px;
font-size: 13.5px;
font-weight: 650;
color: var(--color-warning);
animation: signin-warn-in .3s var(--ease-out);
}
.signin__warn[hidden] { display: none; }
.signin__warn svg {
width: 15px; height: 15px; flex: none;
fill: none; stroke: currentColor;
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
@keyframes signin-warn-in {
from { opacity: 0; transform: translateY(-3px); }
}
.signin__row { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.signin__row .checkbox { font-size: 15px; color: var(--color-text); }
.signin__link {
border-radius: 6px;
font-size: 15px;
font-weight: 650;
color: var(--color-primary);
transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.signin__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.signin__link.is-suggested {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 10%, transparent);
animation: signin-suggest 1.1s var(--ease) 3;
}
@keyframes signin-suggest {
50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--color-primary) 16%, transparent); }
}
.signin__submit {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 58px;
margin-top: 2px;
border: 0;
border-radius: 999px;
background: var(--color-heading);
color: var(--color-surface);
font: inherit;
font-size: 17px;
font-weight: 750;
overflow: hidden;
isolation: isolate;
box-shadow: 0 14px 26px -18px rgba(12, 14, 18, .55);
transition: transform .15s var(--ease-out), box-shadow .3s var(--ease), color .3s var(--ease);
}
.signin__submit::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--color-primary);
opacity: 0;
transition: opacity .3s var(--ease);
}
html[data-theme="dark"] .signin__submit::before { background: var(--color-primary-strong); }
.signin__submit:hover,
.signin__submit:focus-visible {
color: #FFFFFF;
box-shadow: 0 18px 30px -14px color-mix(in srgb, var(--color-primary) 75%, transparent);
}
.signin__submit:focus-visible { box-shadow: var(--ring), 0 18px 30px -14px color-mix(in srgb, var(--color-primary) 75%, transparent); }
.signin__submit:hover::before,
.signin__submit:focus-visible::before { opacity: 1; }
.signin__submit:active { transform: scale(.99); }
.signin__submit-label { transition: transform .3s var(--ease-out); }
.signin__submit:hover .signin__submit-label,
.signin__submit:focus-visible .signin__submit-label { transform: translateX(-4px); }
.signin__submit-arrow {
width: 20px; height: 20px; flex: none;
fill: none; stroke: currentColor;
stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
transition: transform .3s var(--ease-out);
}
.signin__submit:hover .signin__submit-arrow,
.signin__submit:focus-visible .signin__submit-arrow { animation: signin-nudge .9s var(--ease) infinite; }
@keyframes signin-nudge {
0%, 100% { transform: translateX(3px); }
50% { transform: translateX(9px); }
}
.signin__submit.is-loading { pointer-events: none; }
.signin__submit.is-loading .signin__submit-label,
.signin__submit.is-loading .signin__submit-arrow { visibility: hidden; }
.signin__submit.is-loading::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid currentColor;
border-right-color: transparent;
animation: spin .8s linear infinite;
}
.signin__hint { margin-top: 32px; text-align: center; font-size: 14px; color: var(--color-muted); }
@keyframes signin-row-in {
from { opacity: 0; transform: translateY(10px); }
}
.signin--enter > * { animation: signin-row-in .5s var(--ease-out) backwards; }
.signin--enter > :nth-child(2) { animation-delay: .05s; }
.signin--enter > :nth-child(3) { animation-delay: .1s; }
.signin--enter > :nth-child(4) { animation-delay: .15s; }
.signin--enter > :nth-child(5) { animation-delay: .2s; }
@media (min-width: 1700px) {
.signin__stage .crew { --k: 1.45; }
}
@media (max-width: 1280px) {
.signin__stage .crew { --k: 1.05; }
}
@media (max-width: 1080px) {
.signin__stage { padding: 32px; }
.signin__stage .crew { --k: .82; }
.signin__main { padding: 48px 32px; }
}
@media (min-width: 820px) and (max-height: 760px) {
.signin__stage .crew { --k: .95; }
}
@media (min-width: 820px) and (max-height: 620px) {
.signin__stage .crew { --k: .75; }
}
@media (max-width: 819px) {
.signin {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr;
}
.signin__toggle { top: calc(12px + env(safe-area-inset-top)); right: 14px; }
.signin__stage {
align-items: stretch;
gap: 8px;
padding: calc(14px + env(safe-area-inset-top)) 16px 0;
background: linear-gradient(180deg, var(--signin-top), transparent 30%), var(--signin-panel);
}
.signin__brand { align-self: flex-start; }
.signin__logo { height: 38px; max-width: 170px; }
.signin__stage-end { display: none; }
.signin__stage .crew { --k: .56; }
.signin__main {
z-index: 1;
margin-top: -26px;
place-items: start center;
padding: 30px 20px calc(28px + env(safe-area-inset-bottom));
border-radius: 26px 26px 0 0;
box-shadow: 0 -14px 34px -24px rgba(12, 14, 18, .45);
}
.signin__main::after { display: none; }
.signin__title { font-size: 26px; }
.signin__subtitle { font-size: 15px; margin-top: 6px; }
.signin__form { gap: 20px; margin-top: 26px; }
.signin__hint { margin-top: 24px; font-size: 13px; }
}
@media (max-width: 380px) {
.signin__stage .crew { --k: .5; }
}
.spark { height: 40px; margin-top: 8px; }
.spark svg { width: 100%; height: 100%; }
.spark__line { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spark--up .spark__line { stroke: var(--color-success); }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 56px; margin-top: 6px; }
.bars__bar { flex: 1; background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark)); border-radius: 5px 5px 3px 3px; height: var(--h); }
.bar-chart { display: flex; align-items: flex-end; gap: 8px; min-height: 80px; }
.donut-mini { width: 58px; height: 58px; border-radius: 50%; flex: 0 0 58px; background: conic-gradient(var(--color-primary) calc(var(--val) * 1%), var(--color-surface-soft) 0); position: relative; }
.donut-mini::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--color-surface); }
.employee-menu {
display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px;
scrollbar-width: thin;
}
.employee-menu__item {
flex: 0 0 auto; padding: 9px 13px; border-radius: var(--radius-pill);
background: var(--color-surface); border: 1px solid var(--color-border);
color: var(--color-muted); font-weight: 700; font-size: 13px;
transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.employee-menu__item:hover { color: var(--color-text); transform: translateY(-1px); }
.employee-menu__item.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.cabinet-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; }
.cabinet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cabinet-eyebrow {
display: inline-flex; margin-bottom: 7px; color: var(--color-primary-dark);
font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.cabinet-shift {
background:
radial-gradient(circle at 10% 0%, var(--color-primary-soft), transparent 45%),
radial-gradient(circle at 100% 100%, var(--color-coral-soft), transparent 44%),
var(--color-surface);
}
.cabinet-shift__top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.cabinet-shift__title { font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; }
.cabinet-shift__address { margin-top: 7px; color: var(--color-muted); }
.cabinet-shift__meta {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.cabinet-shift__meta > div { flex: 1 1 200px; min-width: 0; }
.cabinet-shift__meta div {
padding: 13px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 76%, var(--color-surface-soft));
border: 1px solid var(--color-border);
}
.cabinet-shift__meta span { display: block; color: var(--color-muted); font-size: 12px; margin-bottom: 4px; }
.cabinet-shift__meta strong { display: block; font-size: 13.5px; }
.cabinet-shift__meta .meta-tile--money { border-left: 3px solid var(--color-primary); }
.cabinet-shift__meta .meta-tile--money strong {
font-size: 19px; font-weight: 800; letter-spacing: -0.01em;
color: var(--color-heading); font-variant-numeric: tabular-nums;
}
.cabinet-shift__meta .meta-tile--money strong.meta-tile__soft {
font-size: 13.5px; font-weight: 700; color: var(--color-text);
}
.cabinet-actions {
display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: auto;
}
.shift-confirm {
display: flex; flex-direction: column; gap: 12px;
padding: 16px; border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-surface) 76%, var(--color-surface-soft));
border: 1px solid var(--color-border);
}
.shift-confirm textarea.input { min-height: 64px; }
.shift-confirm__submit { align-self: flex-start; min-height: var(--control-h); }
.shift-confirm__hint { font-size: 12.5px; color: var(--color-faint); }
.shift-confirm__field { max-width: 520px; }
@media (min-width: 721px) {
.shift-confirm--row {
display: grid; grid-template-columns: minmax(0, 520px) auto;
justify-content: start; align-items: end; column-gap: 16px;
}
.shift-confirm--row .shift-confirm__field { grid-column: 1; grid-row: 1; }
.shift-confirm--row .shift-confirm__submit { grid-column: 2; grid-row: 1; align-self: end; }
.shift-confirm--row .shift-confirm__hint { grid-column: 1 / -1; }
}
.state-tile {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px; border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-surface) 76%, var(--color-surface-soft));
border: 1px solid var(--color-border);
}
.state-tile__icon {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-surface-soft); color: var(--color-muted);
}
.state-tile__icon svg { width: 18px; height: 18px; }
.state-tile__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.state-tile__title { font-size: 13.5px; font-weight: 700; color: var(--color-text); }
.state-tile__text { font-size: 12.5px; color: var(--color-muted); }
.state-tile__side { margin-left: auto; flex: 0 0 auto; }
.state-tile--ok .state-tile__icon { background: var(--color-success-soft); color: var(--color-success); }
.state-tile--warn .state-tile__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.state-tile--wait .state-tile__icon { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.cabinet-kpi { align-items: center; text-align: center; }
.cabinet-kpi .card__head { width: 100%; }
.kpi-ring { width: 178px; height: 178px; margin: 2px auto; }
.progress-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.progress-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 42px; gap: 10px; align-items: center; text-align: left; font-size: 13px; }
.progress-row__label { color: var(--color-muted); }
.progress-row__track { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-soft); overflow: hidden; }
.progress-row__fill { display: block; width: var(--w, 0); height: 100%; border-radius: inherit; }
.progress-row__fill--primary { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); }
.progress-row__fill--success { background: linear-gradient(90deg, var(--color-success), color-mix(in srgb, var(--color-success) 60%, #fff)); }
.progress-row__fill--warning { background: linear-gradient(90deg, var(--color-warning), color-mix(in srgb, var(--color-warning) 60%, #fff)); }
.progress-row__fill--coral { background: linear-gradient(90deg, var(--color-coral), color-mix(in srgb, var(--color-coral) 60%, #fff)); }
.shift-list,
.claim-list { display: grid; gap: 10px; }
.shift-list__item,
.claim-list__item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px; border-radius: var(--radius-lg); background: var(--color-surface-soft);
border: 1px solid var(--color-border);
}
.shift-list__item { border-left: 4px solid var(--color-primary); }
.shift-list__item--beige { border-left-color: var(--color-beige); }
.shift-list__item strong,
.claim-list__item strong { display: block; }
.shift-list__item span,
.claim-list__item span:not(.badge) { display: block; color: var(--color-muted); font-size: 12px; margin-top: 2px; }
.shift-list__item--row { transition: border-color .15s var(--ease); }
.shift-list__item--row:hover { border-color: var(--color-primary); }
.shift-list__link { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.shift-list__side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
.shift-list__item--row { flex-direction: column; align-items: stretch; }
.shift-list__side { justify-content: space-between; }
}
.notice-list,
.material-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notice-list li,
.material-list li {
position: relative; padding-left: 18px; color: var(--color-muted);
}
.notice-list li::before,
.material-list li::before {
content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
border-radius: 50%; background: var(--color-primary);
}
.errorp { min-height: calc(100vh * var(--vu)); display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.errorp__toggle { position: absolute; top: 22px; right: 24px; }
.errorp__card { max-width: 460px; align-items: center; }
.errorp__code { font-size: 96px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--color-primary), var(--color-coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.errorp__title { font-size: 22px; font-weight: 800; margin-top: 12px; }
.errorp__text { color: var(--color-muted); margin: 12px 0 24px; }
.theme-toggle {
background: transparent; border: 0; padding: 0; display: inline-flex;
border-radius: var(--radius-pill); cursor: pointer;
}
.theme-toggle__track {
width: 60px; height: 32px; border-radius: var(--radius-pill); position: relative;
background: var(--color-surface-soft); border: 1px solid var(--color-border);
transition: background-color .38s var(--ease), border-color .38s var(--ease);
}
.theme-toggle:hover .theme-toggle__track { border-color: var(--color-border-strong); }
.theme-toggle__thumb {
position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
background: var(--color-surface); box-shadow: var(--shadow-card);
display: inline-flex; align-items: center; justify-content: center; color: var(--color-warning);
transition: transform .46s cubic-bezier(.34, 1.2, .5, 1), color .3s var(--ease),
background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.theme-toggle.is-flipping .theme-toggle__thumb { animation: theme-thumb-squash .46s var(--ease-out); }
@keyframes theme-thumb-squash {
0% { scale: 1 1; }
32% { scale: 1.16 .84; }
68% { scale: .93 1.07; }
100% { scale: 1 1; }
}
.theme-toggle__icon {
width: 15px; height: 15px; position: absolute;
transition: opacity .26s var(--ease), transform .46s cubic-bezier(.34, 1.3, .5, 1);
}
.theme-toggle__icon--moon { opacity: 0; transform: rotate(-70deg) scale(.5); }
.theme-toggle__icon--sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle__star {
position: absolute; border-radius: 50%; background: var(--color-primary-dark);
opacity: 0; transform: scale(.2);
transition: opacity .28s var(--ease), transform .4s var(--ease-out);
}
.theme-toggle__star:nth-of-type(1) { width: 3px; height: 3px; left: 9px; top: 8px; }
.theme-toggle__star:nth-of-type(2) { width: 2px; height: 2px; left: 17px; top: 19px; }
.theme-toggle__star:nth-of-type(3) { width: 2px; height: 2px; left: 21px; top: 11px; }
html[data-theme="dark"] .theme-toggle__track { background: var(--color-primary-soft); }
html[data-theme="dark"] .theme-toggle__thumb {
transform: translateX(28px); color: var(--color-primary);
box-shadow: var(--shadow-card), 0 0 12px rgba(65, 135, 255, 0.35);
}
html[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(70deg) scale(.5); }
html[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle__star { opacity: .95; transform: scale(1); }
html[data-theme="dark"] .theme-toggle__star:nth-of-type(1) { transition-delay: .16s; }
html[data-theme="dark"] .theme-toggle__star:nth-of-type(2) { transition-delay: .23s; }
html[data-theme="dark"] .theme-toggle__star:nth-of-type(3) { transition-delay: .30s; }
:root {
--theme-x: 50%;
--theme-y: 50%;
--theme-r: 150%;
--theme-wave: .45s;
--theme-wave-ease: cubic-bezier(.3, .15, .35, 1);
}
html.theme-vt::view-transition-group(root) { animation-duration: var(--theme-wave); }
html.theme-vt::view-transition-image-pair(root) { isolation: auto; }
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
backface-visibility: hidden;
}
html.theme-vt::view-transition-old(root) { z-index: 0; }
html.theme-vt::view-transition-new(root) {
z-index: 1;
animation: theme-wave var(--theme-wave) var(--theme-wave-ease) forwards;
}
@keyframes theme-wave {
from { clip-path: circle(0% at var(--theme-x) var(--theme-y)); }
to { clip-path: circle(var(--theme-r) at var(--theme-x) var(--theme-y)); }
}
html.theme-shift *,
html.theme-shift *::before,
html.theme-shift *::after {
transition-property: background-color, color, border-color, outline-color, fill, stroke;
transition-duration: .4s;
transition-timing-function: var(--ease);
transition-delay: 0s;
}
html.theme-shift .theme-toggle__thumb {
transition-property: transform, color, box-shadow;
transition-duration: .46s;
}
html.theme-shift .theme-toggle__icon {
transition-property: opacity, transform;
transition-duration: .46s;
}
@media (prefers-reduced-motion: reduce) {
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) { animation: none; }
html.theme-shift *,
html.theme-shift *::before,
html.theme-shift *::after { transition-duration: 0.001ms; }
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
::view-transition-group(root) {
animation-duration: .24s;
animation-timing-function: var(--ease);
}
html:active-view-transition .page.fade-in,
html:active-view-transition .slide-up,
html:active-view-transition .stagger-item { animation-duration: .001ms; }
.hub-tabs__tab.is-active,
.eco-tabs__tab.is-active { view-transition-name: hub-tab-pill; view-transition-class: pill; }
.period-quick__item.is-active { view-transition-name: period-pill; view-transition-class: pill; }
.chip--mp.is-active { view-transition-name: mp-pill; view-transition-class: pill; }
::view-transition-image-pair(period-pill) { --pill-radius: calc(var(--radius-md) - 4px); }
::view-transition-image-pair(mp-pill) { --pill-radius: var(--radius-pill); --pill-tint: var(--color-heading); }
::view-transition-old(mp-pill),
::view-transition-new(mp-pill) { --pill-tint: var(--color-heading); }
::view-transition-group(.pill) {
animation-duration: .28s;
animation-timing-function: var(--ease);
}
::view-transition-image-pair(.pill) {
overflow: hidden;
transform-origin: center;
border-radius: var(--pill-radius, var(--radius-md));
--pill-glow: drop-shadow(0 2px 6px color-mix(in srgb, var(--pill-tint, var(--color-primary)) 34%, transparent));
filter: var(--pill-glow);
animation: vt-pill-liquid .42s var(--ease) both;
}
html:active-view-transition-type(pill-solo-hub)::view-transition-image-pair(hub-tab-pill),
html:active-view-transition-type(pill-solo-period)::view-transition-image-pair(period-pill),
html:active-view-transition-type(pill-solo-mp)::view-transition-image-pair(mp-pill) {
animation-name: none;
}
::view-transition-old(.pill),
::view-transition-new(.pill) {
width: 100%;
height: 100%;
object-fit: none;
object-position: left center;
background: var(--pill-tint, var(--color-primary));
animation-duration: .16s;
}
html:active-view-transition-type(pill-solo-hub)::view-transition-old(hub-tab-pill),
html:active-view-transition-type(pill-solo-hub)::view-transition-new(hub-tab-pill),
html:active-view-transition-type(pill-solo-period)::view-transition-old(period-pill),
html:active-view-transition-type(pill-solo-period)::view-transition-new(period-pill),
html:active-view-transition-type(pill-solo-mp)::view-transition-old(mp-pill),
html:active-view-transition-type(pill-solo-mp)::view-transition-new(mp-pill) {
animation-duration: .24s;
}
html[data-theme="dark"]::view-transition-image-pair(hub-tab-pill),
html[data-theme="dark"]::view-transition-image-pair(period-pill),
html[data-theme="dark"]::view-transition-old(hub-tab-pill),
html[data-theme="dark"]::view-transition-new(hub-tab-pill),
html[data-theme="dark"]::view-transition-old(period-pill),
html[data-theme="dark"]::view-transition-new(period-pill) {
--pill-tint: var(--color-primary-strong);
}
@keyframes vt-pill-liquid {
0% { transform: scale(1, 1); border-radius: var(--pill-radius, var(--radius-md)); filter: var(--pill-glow); }
22% { transform: scale(1.06, .88); border-radius: 999px; filter: var(--pill-glow) blur(1.2px); }
45% { transform: scale(1.05, .89); border-radius: 999px; filter: var(--pill-glow); }
62% { transform: scale(.965, 1.06); border-radius: 20px; filter: var(--pill-glow); }
82% { transform: scale(1.012, .985); border-radius: 14px; filter: var(--pill-glow); }
100% { transform: scale(1, 1); border-radius: var(--pill-radius, var(--radius-md)); filter: var(--pill-glow); }
}
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes donut-pop { from { opacity: 0; transform: rotate(-90deg) scale(.85); } to { opacity: 1; transform: rotate(-90deg) scale(1); } }
@keyframes line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fill-grow { from { width: 0; } }
@keyframes pulse-soft {
0%, 100% { box-shadow: 0 0 0 var(--pulse-ring-w, 3px) var(--pulse-ring, var(--color-bg)), 0 0 0 var(--pulse-ring-w, 3px) transparent; }
50% { box-shadow: 0 0 0 var(--pulse-ring-w, 3px) var(--pulse-ring, var(--color-bg)), 0 0 0 calc(var(--pulse-ring-w, 3px) + 4px) var(--color-coral-soft); }
}
@keyframes dropdown-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in-soft { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fade-in-soft .18s var(--ease) backwards; }
.slide-up { animation: fade-in-soft .18s var(--ease) backwards; }
.stagger-item { animation: fade-in-soft .18s var(--ease) backwards; }
.hover-lift, .interactive-card { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.hover-lift:hover, .interactive-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); }
.animated-donut svg { animation: donut-pop .9s var(--ease) both; }
.animated-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: line-draw 1.5s var(--ease) .15s forwards; }
.animated-bar { transform-origin: bottom; animation: bar-grow .8s var(--ease) both; }
.animated-fill { animation: fill-grow 1.1s var(--ease) .1s both; }
.pulse-badge { animation: pulse-soft 2.6s ease-in-out infinite; }
.theme-transition { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.focus-ring:focus-visible { outline: 0; box-shadow: var(--ring); }
.soft-glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent), 0 16px 46px color-mix(in srgb, var(--color-primary) 16%, transparent); }
@media (max-width: 1024px) {
.metrics,
.metric-grid { grid-template-columns: repeat(4, 1fr); }
.grid--charts { grid-template-columns: 1fr 1fr; }
.grid--bottom { grid-template-columns: 1fr 1fr; }
.cabinet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filters-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 819px) {
.sidebar {
position: fixed; left: 0; top: 0; transform: translateX(-100%);
transition: transform .3s var(--ease); box-shadow: var(--shadow-pop);
}
.app-shell.is-open .sidebar { transform: translateX(0); }
.sidebar-scrim { position: fixed; inset: 0; background: rgba(7, 17, 31, .45); z-index: 35; border: 0; }
.topbar__menu { display: inline-flex; }
.grid--charts, .grid--bottom, .grid--detail, .cabinet-hero { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.metrics { grid-template-columns: repeat(2, 1fr); }
.metric-grid { grid-template-columns: repeat(2, 1fr); }
.page { padding: 16px; }
.topbar { padding: 0 14px; }
.topbar__search { max-width: none; }
.topbar__user-meta { display: none; }
.topbar__user-caret { display: none; }
.dropdown-menu { right: -52px; width: min(260px, calc(calc(100vw * var(--vu)) - 24px)); }
.auth-card { padding: 22px; }
.form-grid, .filters-bar { grid-template-columns: 1fr; }
.form-field--full { grid-column: auto; }
.detail-list > div { grid-template-columns: 1fr; gap: 4px; }
.cabinet-grid { grid-template-columns: 1fr; }
.cabinet-shift__top { flex-direction: column; }
.cabinet-shift__meta > div { flex-basis: 100%; }
.cabinet-actions .btn { width: 100%; }
.shift-confirm__submit { align-self: stretch; width: 100%; }
.state-tile { flex-wrap: wrap; }
.state-tile__side { margin-left: 46px; }
.progress-row { grid-template-columns: minmax(0, 1fr) 86px 38px; }
.copy-secret-box__row { align-items: stretch; }
.copy-secret-box__row .btn { width: 100%; }
.interactive-card:hover, .hover-lift:hover { transform: none; }
}
@media (max-width: 520px) {
.topbar__search { display: none; }
.topbar__actions { gap: 8px; }
.theme-toggle__track { width: 54px; height: 30px; }
html[data-theme="dark"] .theme-toggle__thumb { transform: translateX(22px); }
.metrics,
.metric-grid { grid-template-columns: 1fr; }
.page__actions,
.page__actions .btn { width: 100%; }
.auth-shell__toggle { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition: none !important;
scroll-behavior: auto !important;
}
.animated-line { stroke-dashoffset: 0; }
}
.sidebar__section {
margin: 12px 12px 4px; font-size: 10px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--color-faint);
}
.sidebar__nav > .sidebar__section:first-child { margin-top: 2px; }
.sidebar-item.is-disabled { opacity: .55; cursor: default; }
.sidebar-item.is-disabled:hover { background: transparent; color: inherit; }
.sidebar-item__soon {
margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .04em;
text-transform: uppercase; color: var(--color-muted);
background: var(--color-surface-soft); border-radius: var(--radius-pill); padding: 2px 7px;
}
.sidebar-item__soon--beta { color: var(--color-primary); background: var(--color-primary-soft); }
.errorp__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.access-matrix th.access-matrix__role { text-align: center; }
.access-matrix__section { text-align: left; font-weight: 700; color: var(--color-text); }
.access-matrix__cell { text-align: center; }
.access-yes { color: var(--color-success); font-weight: 800; }
.access-maybe { color: var(--color-primary); font-weight: 800; }
.access-no { color: var(--color-muted); }
.filters-bar--pvz {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.filters-bar--pvz .filters-bar__search { grid-column: 1 / -1; }
.metric-grid--pvz { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.metric-card__value--success { color: var(--color-success); }
.metric-card__value--warning { color: var(--color-heading); }
.metric-card__value--danger { color: var(--color-danger); }
.pvz-form {
display: flex;
flex-direction: column;
gap: 18px;
max-width: 980px;
width: 100%;
margin-inline: auto;
}
.json-preview {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
color: var(--color-muted);
font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pvz-assignment-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pvz-assignment-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.pvz-assignment-list li:last-child { border-bottom: 0; }
.table-cell-address { max-width: 300px; min-width: 220px; }
.table td.table-cell-address,
.table td.table-cell-pvz {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1024px) {
.metric-grid--pvz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.filters-bar--pvz,
.metric-grid--pvz { grid-template-columns: 1fr; }
.pvz-form { max-width: none; }
}
.badge--planned { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--confirmed { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary-dark); }
.badge--worked { background: var(--color-success-soft); color: var(--color-success); }
.badge--no_show { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--cancelled { background: var(--color-surface-soft); color: var(--color-muted); }
.metric-grid--shift { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.filters-bar--shift {
grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.filters-bar--shift .filters-bar__search { grid-column: 1 / -1; }
.shift-form { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.pattern-generate { display: flex; flex-direction: column; gap: 14px; }
.pattern-generate__title { font-size: 16px; font-weight: 850; }
.pattern-generate__hint { margin-top: 6px; color: var(--color-muted); font-size: 12.5px; line-height: 1.55; max-width: 720px; }
.pattern-generate__form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pattern-generate__form .form-field { min-width: 170px; }
.pattern-form { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.pattern-form [hidden] { display: none !important; }
.pattern-form__kind { border: 0; padding: 0; margin: 0 0 14px; }
.pattern-form__kind ul { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; padding: 0; margin: 0; }
.pattern-form__kind label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.pattern-form__weekdays ul { list-style: none; display: flex; gap: 14px; flex-wrap: wrap; padding: 0; margin: 6px 0 0; }
.pattern-form__weekdays label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; cursor: pointer; }
@media (max-width: 760px) {
.pattern-generate { align-items: stretch; }
.pattern-generate__form { flex-direction: column; align-items: stretch; }
}
.stack-form { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-border); }
.stack-form:first-of-type { border-top: 0; padding-top: 0; }
.form-subtitle { font-size: 13px; font-weight: 800; color: var(--color-text); }
.inline-form { display: inline; }
.color-chip { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 6px; vertical-align: middle; background: var(--chip, var(--color-border)); border: 1px solid var(--color-border); }
.calendar-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.calendar-nav { display: inline-flex; align-items: center; gap: 10px; }
.calendar-toolbar--center { justify-content: center; }
.calendar-toolbar--datecenter { container-type: inline-size; }
.calendar-toolbar--datecenter > .calendar-toolbar__side { min-width: 0; max-width: 100%; }
@container (min-width: 1120px) {
.calendar-toolbar--datecenter > .calendar-toolbar__side { flex: 1 1 0; }
}
.calendar-toolbar__side--end { justify-content: flex-end; }
.calendar-nav__label { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; min-width: 200px; text-align: center; }
.calendar { width: 100%; }
.calendar__weekdays,
.calendar__week {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar__weekdays { gap: 5px; margin-bottom: 2px; }
.calendar__weekday {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
color: var(--color-muted); text-align: left; padding: 8px 0 10px 10px;
}
.calendar__week { gap: 5px; margin-bottom: 5px; }
.calendar__cell {
min-height: 124px; border-radius: var(--radius-md);
border: 0; background: var(--color-surface-alt);
padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 6px;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
container-type: inline-size;
overflow: hidden;
}
.calendar__cell:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 55%, transparent); }
.calendar__cell--out { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.calendar__cell--today .calendar__date {
display: inline-flex; align-items: center; justify-content: center;
min-width: 26px; height: 26px; padding: 0 7px;
border-radius: var(--radius-pill);
background: var(--color-primary); color: var(--color-bg);
}
.calendar--coverage .calendar__cell--today .calendar__date,
.calendar--openings .calendar__cell--today .calendar__date { min-width: 22px; height: 22px; padding: 0 5px; }
.calendar__date { font-size: 14.5px; font-weight: 800; color: var(--color-text); line-height: 1.1; }
.calendar__cell--out .calendar__date { font-weight: 700; color: color-mix(in srgb, var(--color-muted) 70%, transparent); }
.calendar__cell-shifts { display: flex; flex-direction: column; gap: 4px; }
.cal-pill {
display: block; text-decoration: none; border-radius: var(--radius-sm);
padding: 4px 7px; font-size: 11.5px; line-height: 1.3;
border-left: 3px solid var(--color-primary);
background: var(--color-surface-soft); color: var(--color-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: transform .12s var(--ease);
}
.cal-pill:hover { transform: translateX(1px); }
.cal-pill__time { font-weight: 700; }
.cal-pill__name { color: var(--color-muted); }
.cal-pill--planned { border-left-color: var(--color-primary); }
.cal-pill--confirmed { border-left-color: var(--color-primary-dark); }
.cal-pill--worked { border-left-color: var(--color-success); }
.cal-pill--no_show { border-left-color: var(--color-danger); }
.cal-pill--cancelled { border-left-color: var(--color-muted); opacity: .6; text-decoration: line-through; }
.cal-more { font-size: 11px; font-weight: 700; color: var(--color-primary-dark); }
.calendar__cell--cov { text-decoration: none; color: inherit; cursor: pointer; }
.calendar__cell--cov:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 55%, transparent); }
.calendar__cell--gap {
background-image: linear-gradient(
color-mix(in srgb, var(--color-danger) 11%, transparent),
color-mix(in srgb, var(--color-danger) 11%, transparent)
);
}
.calendar__cell-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cal-cov__total {
font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
color: var(--color-primary-dark); background: var(--color-primary-soft);
border-radius: var(--radius-pill); padding: 1px 7px;
}
.cal-cov__legend { margin-top: 10px; font-size: 12.5px; color: var(--color-muted); }
.cal-oc { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.cal-oc__chip {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
font-size: 11.5px; font-weight: 700; line-height: 1.3;
border-radius: var(--radius-pill); padding: 3px 9px;
white-space: nowrap; max-width: 100%;
}
.cal-oc__chip svg { width: 11px; height: 11px; flex: none; }
.cal-oc__chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.cal-oc__chip em { font-style: normal; font-weight: 700; }
.cal-oc__chip--open { background: var(--color-success-soft); color: var(--color-success); }
.cal-oc__chip--closed { background: var(--color-danger); color: var(--color-bg); }
.cal-oc__none { font-size: 11px; color: var(--color-muted); }
.cal-oc__chip--late { background: var(--color-warning-soft); color: var(--color-warning); }
.cal-oc__chip--review { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.cal-oc__chip--nodata { background: var(--color-surface-soft); color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-border); }
.badge--nodata { background: var(--color-surface-soft); color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-border); }
.table tbody tr.is-nodata { cursor: default; }
.table tbody tr.is-nodata td { color: var(--color-muted); }
.calendar__cell--warn {
background-image: linear-gradient(
color-mix(in srgb, var(--color-warning) 12%, transparent),
color-mix(in srgb, var(--color-warning) 12%, transparent)
);
}
.calendar--openings .calendar__cell { min-height: 124px; }
@container (max-width: 78px) {
.cal-cov__total,
.cal-oc__none { display: none; }
}
.day-jump { display: inline-flex; align-items: center; }
.day-jump__input { max-width: 176px; font-weight: 700; text-align: center; }
.calendar-nav .day-jump__input {
min-width: 240px; font-size: 22px; font-weight: 800; letter-spacing: -0.015em;
border: 0; background: transparent;
padding: 0 6px 0 28px;
}
.calendar-nav .day-jump__input::-webkit-calendar-picker-indicator {
width: 16px; height: 16px; margin-left: 6px; padding: 0;
}
.calendar-toolbar__side { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card--bar { padding: 12px 16px; gap: 0; }
.card--bar .calendar-toolbar { margin-bottom: 0; }
.filter-note {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 14px; border-radius: var(--radius-md);
background: var(--color-primary-soft);
border: 1px solid color-mix(in srgb, var(--color-primary) 26%, transparent);
color: var(--color-primary-dark);
}
.filter-note svg { width: 16px; height: 16px; flex: none; }
.filter-note__text { font-size: 13px; font-weight: 600; margin-right: auto; }
.filter-note__text b { font-weight: 800; }
.cal-legend {
display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
margin-top: 14px; padding-top: 12px;
border-top: 1px solid var(--color-divider);
}
.cal-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.cal-legend__item .cal-oc__chip { align-self: center; }
.cal-legend__text { font-size: 12.5px; color: var(--color-muted); line-height: 1.45; }
.cal-legend__item--hint svg { width: 15px; height: 15px; flex: none; color: var(--color-muted); }
@media (max-width: 819px) {
.cal-legend { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@container (max-width: 132px) {
.cal-oc__chip em { display: none; }
}
@container (max-width: 104px) {
.cal-oc__chip { padding: 2px 7px; gap: 4px; }
.cal-oc__chip svg { display: none; }
}
@container (max-width: 78px) {
.cal-oc__chip { padding: 1px 6px; font-size: 11px; }
.calendar__date { font-size: 11.5px; }
.cal-cov__total { padding: 1px 5px; }
}
.view-switch {
display: inline-flex; padding: 3px; gap: 2px;
background: var(--color-surface-soft); border: 1px solid var(--color-border);
border-radius: var(--radius-md);
max-width: 100%; overflow-x: auto; scrollbar-width: none;
min-width: 0;
}
.view-switch::-webkit-scrollbar { display: none; }
.view-switch__btn { flex: none; }
.view-switch__btn {
display: inline-flex; align-items: center; gap: 7px;
border: 0; text-decoration: none; cursor: pointer;
background: transparent; color: var(--color-muted);
font-weight: 700; font-size: 13px; padding: 7px 13px;
border-radius: calc(var(--radius-md) - 3px);
transition: color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.view-switch__btn svg { width: 15px; height: 15px; }
.view-switch__btn:hover { color: var(--color-text); }
.view-switch__btn.is-active {
background: var(--color-surface); color: var(--color-primary-dark);
box-shadow: var(--shadow-xs);
}
.list-view-switch { margin-bottom: 16px; }
@media (max-width: 400px) {
.view-switch__btn { padding: 7px 10px; gap: 5px; font-size: 12.5px; }
.view-switch__btn svg { width: 14px; height: 14px; }
}
.assign { display: flex; flex-direction: column; gap: var(--gap-cards); }
.assign-params__grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px 14px; align-items: start;
}
.assign-params__grid > :first-child { grid-column: span 2; }
@media (max-width: 819px) { .assign-params__grid { grid-template-columns: 1fr 1fr; } }
.assign-params .field__hint { margin-top: 10px; }
.assign-empty { text-align: center; padding: 26px; }
.assign-board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.assign-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.assign-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 52px;
padding: 8px 12px; margin-inline: -12px;
border-radius: var(--radius-md);
border-bottom: 1px solid var(--color-divider);
transition: background-color .14s var(--ease);
}
.assign-row:last-child { border-bottom: 0; }
.assign-row:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.assign-row:has(input:checked) { background: color-mix(in srgb, var(--color-primary) 34%, var(--color-surface)); }
.assign-row:has(input:checked) .assign-row__name { color: var(--color-heading); font-weight: 750; }
.assign-row__pick { display: flex; align-items: center; gap: 11px; cursor: pointer; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.assign-row__pick input { width: 20px; height: 20px; accent-color: var(--color-primary); flex: none; }
.assign-row.is-assigned { opacity: .72; }
.assign-row.is-assigned .assign-row__pick { cursor: default; }
.assign-row.is-busy .assign-row__name { color: var(--color-text); }
.assign-row__state .badge-muted,
.assign-row__state .badge-secondary { background: transparent; padding-inline: 0; color: var(--color-faint); font-weight: 600; }
.badge-muted { background: var(--color-surface-soft); color: var(--color-muted); }
.assign-board__key { margin: -4px 0 10px; }
.assign-board__foot {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); flex-wrap: wrap;
}
.assign-board__hint { color: var(--color-muted); font-size: 12.5px; max-width: 62ch; }
.mx-assign { margin-top: 8px; }
.assign-repeat {
display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, 1fr) 2fr;
gap: 12px 14px; align-items: start; margin-top: 14px; padding-top: 14px;
border-top: 1px solid var(--color-divider);
}
@media (max-width: 819px) { .assign-repeat { grid-template-columns: 1fr; } }
.assign-repeat__weekdays > div { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 6px; }
.assign-repeat__weekdays label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; cursor: pointer;
}
.assign-repeat__weekdays input { width: 15px; height: 15px; accent-color: var(--color-primary); }
.assign-others__summary {
display: flex; align-items: center; gap: 10px; cursor: pointer;
font-weight: 700; font-size: 15px; list-style: none;
}
.assign-others__summary::-webkit-details-marker { display: none; }
.assign-others__summary::after {
content: "▾"; margin-left: auto; color: var(--color-muted);
transition: transform .16s var(--ease);
}
.assign-others[open] .assign-others__summary::after { transform: rotate(180deg); }
.assign-others > .field__hint { margin-top: 10px; }
.assign-others__search { margin: 12px 0 4px; max-width: 340px; }
.assign-others__empty { padding: 10px 0 0; }
.assign-row--transfer .assign-row__state { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.assign-foot {
position: sticky; bottom: 0; z-index: 12;
display: flex; flex-direction: row; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
}
.assign-others .assign-list { max-height: 360px; overflow: auto; }
.wizard { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; }
.wizard [hidden] { display: none !important; }
.wiz-steps { list-style: none; display: flex; gap: 10px; padding: 0; margin: 0; flex-wrap: wrap; }
.wiz-steps__item {
display: inline-flex; align-items: center; gap: 9px;
padding: 8px 14px; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-surface);
color: var(--color-muted); font-size: 13px; font-weight: 700;
transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.wiz-steps__item.is-active {
border-color: var(--color-primary); color: var(--color-primary-dark);
background: var(--color-primary-soft);
}
.wiz-steps__item.is-done {
color: var(--color-success); cursor: pointer;
border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border));
}
.wiz-steps__num {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%; flex: none;
background: var(--color-surface-soft); font-size: 12px; font-weight: 800;
}
.wiz-steps__item.is-active .wiz-steps__num { background: var(--color-primary); color: var(--color-on-primary); }
.wiz-steps__item.is-done .wiz-steps__num { background: var(--color-success-soft); color: var(--color-success); }
.wiz-panel { display: flex; flex-direction: column; gap: 14px; }
.wiz-panel__error { margin: 0; font-size: 13px; font-weight: 700; color: var(--color-danger); }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.wiz-nav__spacer { flex: 1; }
.wiz-field--pvz { max-width: 460px; }
.wiz-emp-box {
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface-soft); padding: 12px;
max-height: 340px; overflow: auto;
}
.wiz-emp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.wiz-emp__row {
display: flex; align-items: center; gap: 10px; cursor: pointer;
padding: 9px 12px; border: 1px solid var(--color-border);
border-radius: var(--radius-md); background: var(--color-surface);
transition: border-color .14s var(--ease), background .14s var(--ease);
}
.wiz-emp__row:hover { border-color: var(--color-primary); }
.wiz-emp__row:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.wiz-emp__row input { flex: none; }
.wiz-emp__name { font-weight: 700; font-size: 13.5px; }
.wiz-emp__hint { margin-left: auto; font-size: 11.5px; color: var(--color-muted); white-space: nowrap; }
.wiz-emp__hint--none { font-style: italic; }
.wiz-emp__empty { margin: 0; padding: 8px 4px; font-size: 13px; color: var(--color-muted); }
.wiz-emp__bulk { margin-bottom: 10px; }
.wiz-kind { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; max-width: 680px; }
.wiz-kind__card {
position: relative; display: flex; flex-direction: column; gap: 4px;
padding: 14px 16px; cursor: pointer;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface);
transition: border-color .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease);
}
.wiz-kind__card:hover { border-color: var(--color-primary); }
.wiz-kind__card:has(input:checked) {
border-color: var(--color-primary); background: var(--color-primary-soft);
box-shadow: var(--ring);
}
.wiz-kind__card input { position: absolute; opacity: 0; pointer-events: none; }
.wiz-kind__title { font-size: 14px; font-weight: 800; }
.wiz-kind__desc { font-size: 12.5px; color: var(--color-muted); line-height: 1.45; }
.wiz-days ul { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; padding: 0; }
.wiz-days label {
position: relative; display: inline-flex; align-items: center; justify-content: center;
min-width: 52px; padding: 8px 12px; cursor: pointer;
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
background: var(--color-surface); font-size: 13px; font-weight: 700; color: var(--color-muted);
transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.wiz-days label:hover { border-color: var(--color-primary); }
.wiz-days label:has(input:checked) {
border-color: var(--color-primary); background: var(--color-primary-soft);
color: var(--color-primary-dark);
}
.wiz-days input { position: absolute; opacity: 0; pointer-events: none; }
.wiz-slots { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.wiz-slot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 12px; border: 1px solid var(--color-border);
border-radius: var(--radius-md); background: var(--color-surface-soft);
}
.wiz-slot__name { font-weight: 700; font-size: 13.5px; }
.wiz-slot__toggle {
display: inline-flex; padding: 3px; gap: 2px; flex: none;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
}
.wiz-slot__toggle button {
border: 0; background: transparent; cursor: pointer;
color: var(--color-muted); font-weight: 700; font-size: 12px;
padding: 5px 12px; border-radius: var(--radius-pill);
transition: background .14s var(--ease), color .14s var(--ease);
}
.wiz-slot__toggle button.is-on { background: var(--color-primary); color: var(--color-on-primary); }
.wiz-summary-box {
border: 1px dashed var(--color-border); border-radius: var(--radius-md);
padding: 14px 16px; background: var(--color-surface-soft);
}
.wiz-summary-box__title { margin: 0 0 10px; font-size: 13px; font-weight: 800; }
.wiz-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.wiz-summary dt { color: var(--color-muted); font-size: 12.5px; font-weight: 700; }
.wiz-summary dd { margin: 0; font-size: 13px; font-weight: 650; }
@media (max-width: 760px) {
.wiz-emp { grid-template-columns: 1fr; }
.wiz-emp__hint { white-space: normal; }
.wiz-summary { grid-template-columns: 1fr; gap: 2px; }
.wiz-summary dd { margin-bottom: 8px; }
.wiz-slot { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.matrix-toolbar-side {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
flex: 1 1 100%;
padding: 10px 12px;
border-radius: var(--radius-lg);
border: 1px solid var(--color-divider);
background: var(--color-surface-alt);
}
.matrix-toolbar-side .mx-closedtoggle { margin-left: auto; }
.calendar-toolbar:has(.matrix-toolbar-side) { justify-content: flex-start; }
.mx-fullbtn svg { width: 15px; height: 15px; }
.matrix-filter { display: inline-flex; align-items: center; gap: 8px; }
.matrix-filter .input { max-width: 240px; }
.matrix-filter > .pvz-pick { flex: 0 1 auto; min-width: 168px; }
.matrix-filter { flex-wrap: wrap; }
.matrix-filter > .matrix-order { flex: 1 1 150px; min-width: 132px; }
.calendar-toolbar .input,
.matrix-filter .input { min-height: var(--control-h-sm); padding-top: 6px; padding-bottom: 6px; }
.calendar-toolbar,
.matrix-filter { --pick-collapsed-h: var(--control-h-sm); }
.calendar-toolbar input[type="date"].input,
.calendar-toolbar input[type="time"].input { height: var(--control-h-sm); }
.calendar-toolbar .view-switch { height: var(--control-h-sm); align-items: stretch; }
.calendar-toolbar .view-switch__btn { padding-top: 0; padding-bottom: 0; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mx-legend {
display: flex; align-items: flex-start; gap: 10px 22px; flex-wrap: wrap;
margin: 0 0 12px;
}
.mx-legend--totals { margin: 0 0 10px; }
.mx-legend--totals .mx-legend__axis { flex-direction: row; align-items: center; }
.mx-help { margin: 0 0 12px; }
.mx-help__summary {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
font-size: 12.5px; font-weight: 650; color: var(--color-muted);
padding: 5px 11px; border-radius: var(--radius-pill);
list-style: none; transition: background-color .14s var(--ease), color .14s var(--ease);
}
.mx-help__summary::-webkit-details-marker { display: none; }
.mx-help__summary::after {
content: "▾"; font-size: 10px; line-height: 1;
transition: transform .16s var(--ease);
}
.mx-help[open] .mx-help__summary::after { transform: rotate(180deg); }
.mx-help__summary:hover { background: var(--color-surface-soft); color: var(--color-text); }
.mx-help__summary:focus-visible { outline: none; box-shadow: var(--ring-soft); }
.mx-legend--help { margin: 12px 0 0; }
.mx-help .mx-panhint { margin: 10px 0 0; }
.mx-legend__axis { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mx-legend__cap {
font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
color: var(--color-muted); text-transform: uppercase;
}
.mx-legend__items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-legend__item {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 11px; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-surface);
font-size: 12px; font-weight: 650; color: var(--color-muted);
}
.mx-legend__item b {
font-size: 12.5px; font-weight: 800; color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.mx-legend__swatch {
width: 11px; height: 11px; border-radius: 3px; flex: none;
background: var(--_mx-tint); border: 1px solid var(--_mx-line);
}
.mx-legend__item--regular { --_mx-tint: var(--color-success-soft); --_mx-line: var(--color-success); }
.mx-legend__item--replacement { --_mx-tint: var(--color-warning-soft); --_mx-line: var(--color-warning); }
.mx-legend__item--gap { --_mx-tint: var(--color-danger-soft); --_mx-line: var(--color-danger); }
.mx-legend__item--pay-upfront {
--_mx-tint: color-mix(in srgb, var(--color-cyan) 24%, var(--color-surface));
--_mx-line: var(--color-cyan);
}
.mx-legend__item--pay-after {
--_mx-tint: color-mix(in srgb, var(--color-magenta) 24%, var(--color-surface));
--_mx-line: var(--color-magenta);
}
.mx-dot {
width: 7px; height: 7px; border-radius: 50%; flex: none;
display: inline-block; vertical-align: middle;
margin-right: 5px; margin-bottom: 1px;
}
.mx-dot--official,
.mx-dot--unknown { display: none; }
.mx-dot--unofficial { background: var(--color-violet); }
.mx-dot--casual {
background: transparent;
box-shadow: inset 0 0 0 2px var(--color-muted);
}
.mx-legend__item--emp .mx-dot { display: inline-block; margin-right: 2px; }
.sched-matrix__wrap {
overflow: auto; max-height: max(calc(100vh * var(--vu) - 300px), 360px);
border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
background: var(--color-surface);
scrollbar-gutter: stable;
}
.sched-matrix__wrap:not(.sched-matrix__wrap--day) {
scroll-snap-type: x proximity;
scroll-padding-left: 190px;
}
.sched-matrix__wrap:not(.sched-matrix__wrap--day) .sched-matrix__day {
scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) {
.sched-matrix__wrap { scroll-snap-type: none; }
}
body.is-matrix-panning,
body.is-matrix-panning .sched-matrix__wrap { cursor: grabbing; }
body.is-matrix-panning { user-select: none; -webkit-user-select: none; }
body.is-matrix-panning .sched-matrix a,
body.is-matrix-panning .sched-matrix button { cursor: grabbing; }
.mx-panhint { margin: -4px 0 10px; font-size: 12px; color: var(--color-muted); }
.mx-panhint[hidden] { display: none; }
.mx-panhint kbd {
font: inherit; font-weight: 700; color: var(--color-heading);
background: var(--color-surface-soft); border: 1px solid var(--color-border);
border-radius: 5px; padding: 1px 5px;
}
.sched-matrix {
border-collapse: separate; border-spacing: 0; width: 100%;
font-variant-numeric: tabular-nums;
}
.sched-matrix th, .sched-matrix td {
border-bottom: 1px solid var(--color-divider);
border-right: 1px solid color-mix(in srgb, var(--color-text) 4%, transparent);
}
.sched-matrix__cell.is-weekend + .sched-matrix__cell:not(.is-weekend),
.sched-matrix__day.is-weekend + .sched-matrix__day:not(.is-weekend) {
border-left: 1px solid var(--color-divider);
}
.sched-matrix thead th { border-bottom: 0; }
.sched-matrix__corner,
.sched-matrix__pvz {
position: sticky; left: 0; z-index: 2;
background: var(--color-surface);
min-width: 190px; max-width: 260px;
padding: 7px 12px; text-align: left; vertical-align: middle;
box-shadow: 1px 0 0 var(--color-border);
}
.sched-matrix__corner {
z-index: 4; top: 0;
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .06em; color: var(--color-muted);
}
.sched-matrix thead th {
position: sticky; top: 0; z-index: 3;
background: var(--color-surface);
box-shadow: 0 1px 0 var(--color-border);
}
.sched-matrix thead th.sched-matrix__corner {
z-index: 5;
box-shadow: 1px 1px 0 var(--color-border);
}
.sched-matrix__pvzname {
display: block; font-size: 13px; font-weight: 700; color: var(--color-text);
text-decoration: none; line-height: 1.3;
}
a.sched-matrix__pvzname:hover { color: var(--color-primary-dark); }
.sched-matrix__meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.sched-matrix__code {
font-size: 11px; font-weight: 650; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 0 1 auto; min-width: 0;
}
.sched-matrix__city {
font-size: 10.5px; font-weight: 700; color: var(--color-primary-dark);
background: var(--color-primary-soft); border-radius: var(--radius-pill);
padding: 1px 7px; white-space: nowrap; flex: 0 1 auto;
overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.sched-matrix--bycity .sched-matrix__city { display: none; }
.mx-gapcount {
font-size: 10.5px; font-weight: 700; color: var(--color-danger);
background: var(--color-danger-soft); border-radius: var(--radius-pill);
padding: 1px 7px; white-space: nowrap; flex: none; margin-left: auto;
}
.mx-status {
font-size: 10.5px; font-weight: 700; color: var(--color-muted);
background: var(--color-surface-soft); border: 1px solid var(--color-border);
border-radius: var(--radius-pill); padding: 0 7px; white-space: nowrap; flex: none;
}
.mx-status--suspended { color: var(--color-warning); background: var(--color-warning-soft); }
.sched-matrix tbody tr:has(.mx-status--closed) .sched-matrix__pvzname { color: var(--color-muted); }
.mx-closedtoggle {
display: inline-flex; align-items: center; gap: 8px;
min-height: var(--control-h-sm); padding: 0 10px 0 8px;
border-radius: var(--radius-pill); text-decoration: none;
font-size: 12.5px; font-weight: 650; color: var(--color-muted);
border: 1px solid var(--color-border); background: transparent;
transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.mx-closedtoggle:hover { color: var(--color-text); background: var(--color-surface-soft); }
.mx-closedtoggle:focus-visible { outline: none; box-shadow: var(--ring-soft); }
.mx-closedtoggle__knob {
position: relative; flex: 0 0 auto; width: 26px; height: 15px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, currentColor 24%, transparent);
transition: background .18s ease;
}
.mx-closedtoggle__knob::after {
content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 10px; height: 10px;
border-radius: 50%; background: currentColor;
transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
.mx-closedtoggle__label b { font-weight: 800; color: inherit; margin-left: 2px; }
.mx-closedtoggle.is-on {
color: var(--color-primary-dark); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
background: var(--color-primary-soft);
}
.mx-closedtoggle.is-on .mx-closedtoggle__knob { background: var(--color-primary); }
.mx-closedtoggle.is-on .mx-closedtoggle__knob::after { background: #fff; transform: translateX(11px); }
.sched-matrix tbody tr:hover .sched-matrix__cell {
background-image: linear-gradient(
color-mix(in srgb, var(--color-primary) 8%, transparent),
color-mix(in srgb, var(--color-primary) 8%, transparent)
);
}
.sched-matrix tbody tr:hover .sched-matrix__pvz { background: var(--color-surface-soft); }
.sched-matrix__day { padding: 0; min-width: 88px; }
.sched-matrix__day a {
display: flex; flex-direction: column; align-items: center; gap: 0;
padding: 6px 6px; text-decoration: none; color: inherit;
transition: background .15s var(--ease);
}
.sched-matrix__day a:hover { background: var(--color-primary-soft); }
.sched-matrix__daynum { font-size: 14px; font-weight: 800; line-height: 1.2; }
.sched-matrix__dayname {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--color-muted);
}
.sched-matrix__day.is-weekend .sched-matrix__dayname { color: var(--color-faint); }
.sched-matrix__day.is-today {
background: linear-gradient(180deg,
color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)),
color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)));
border-radius: var(--radius-md) var(--radius-md) 0 0;
box-shadow:
inset 1px 0 0 color-mix(in srgb, var(--color-primary) 16%, transparent),
inset -1px 0 0 color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.sched-matrix__day.is-today a { padding-top: 6px; }
.sched-matrix__day.is-today a:hover { background: transparent; }
.sched-matrix__day.is-today .sched-matrix__daynum {
display: grid; place-items: center;
width: 24px; height: 24px; border-radius: 50%;
background: var(--color-primary); color: #FFFFFF;
box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary) 40%, transparent);
font-size: 12.5px;
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.sched-matrix__day.is-today .sched-matrix__dayname {
color: var(--color-primary-dark); letter-spacing: .04em; font-weight: 750;
}
html[data-theme="dark"] .sched-matrix__day.is-today .sched-matrix__daynum { color: var(--color-bg); }
.sched-matrix__cell {
position: relative;
padding: 4px; vertical-align: middle; min-width: 88px;
background-color: var(--color-surface);
transition: box-shadow .12s var(--ease);
}
.sched-matrix__cell.is-open {
background-color: color-mix(in srgb, var(--color-success) 9%, var(--color-surface));
}
.sched-matrix__cell.is-closed {
background-color: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
}
.sched-matrix__cell.is-off {
background-color: var(--color-surface-alt);
}
html[data-theme="dark"] .sched-matrix__cell.is-open {
background-color: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
}
html[data-theme="dark"] .sched-matrix__cell.is-closed {
background-color: color-mix(in srgb, var(--color-danger) 26%, var(--color-surface));
}
html[data-theme="dark"] .sched-matrix__cell.is-off {
background-color: var(--color-surface-alt);
}
.sched-matrix__cell.is-today {
background-image: linear-gradient(
color-mix(in srgb, var(--color-primary) 6%, transparent),
color-mix(in srgb, var(--color-primary) 6%, transparent)
);
box-shadow:
inset 1px 0 0 color-mix(in srgb, var(--color-primary) 16%, transparent),
inset -1px 0 0 color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.sched-matrix__cell.is-focus {
background-image: linear-gradient(
color-mix(in srgb, var(--color-warning) 14%, transparent),
color-mix(in srgb, var(--color-warning) 14%, transparent)
);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-warning) 55%, transparent);
}
.sched-matrix__cell { position: relative; }
.mx-cellbtn {
position: absolute; inset: 0; z-index: 0;
border: 0; background: transparent; cursor: pointer; padding: 0;
display: grid; place-items: center;
transition: box-shadow .12s var(--ease);
}
.mx-cellbtn__plus {
font-size: 15px; font-weight: 800; line-height: 1;
color: var(--color-primary-dark); opacity: 0;
transition: opacity .12s var(--ease);
}
.mx-cellbtn:hover { box-shadow: inset 0 0 0 2px var(--color-primary); }
.sched-matrix__cell.is-closed .mx-cellbtn:hover .mx-cellbtn__plus,
.sched-matrix__cell.is-off .mx-cellbtn:hover .mx-cellbtn__plus { opacity: 1; }
.sched-matrix__cell.is-open .mx-cellbtn { place-items: end end; padding: 0 4px 3px 0; }
.sched-matrix__cell.is-open .mx-cellbtn:hover .mx-cellbtn__plus { opacity: .7; font-size: 12px; }
.mx-cellbtn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.sched-matrix__cell .mx-chip,
.sched-matrix__cell .mx-more { position: relative; z-index: 1; }
html[data-theme="dark"] .mx-chip { background: color-mix(in srgb, #FFFFFF 9%, transparent); }
.mx-chip {
display: block; text-decoration: none;
font-size: 11.5px; font-weight: 650; line-height: 1.3; color: var(--color-text);
background: color-mix(in srgb, var(--color-surface) 82%, transparent);
border-left: 3px solid var(--color-success);
border-radius: var(--radius-pill); padding: 3px 8px; margin-bottom: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: background .12s var(--ease);
}
.mx-chip:last-child { margin-bottom: 0; }
.mx-chip:hover { background: var(--color-surface); }
.mx-chip--regular { border-left-color: var(--color-success); }
.mx-chip--replacement { border-left-color: var(--color-warning); }
.mx-chip--emp-unofficial { color: var(--color-violet); }
.mx-chip--emp-casual { font-style: italic; }
.mx-chip--pay-upfront,
.mx-chip--pay-after_shift {
border-right: 3px solid var(--_pay-line);
font-weight: 750;
}
.mx-chip--pay-upfront { --_pay-line: var(--color-cyan); }
.mx-chip--pay-after_shift { --_pay-line: var(--color-magenta); }
.mx-more {
display: inline-block; font-size: 10.5px; font-weight: 700;
color: var(--color-primary-dark); text-decoration: none; padding: 1px 4px;
}
.mx-more:hover { text-decoration: underline; }
.mx-closed {
display: block; font-size: 12px; font-weight: 800; padding: 3px 0;
color: color-mix(in srgb, var(--color-danger) 78%, transparent);
text-align: center; line-height: 1.4;
}
.mx-off {
display: block; font-size: 12px; padding: 3px 0;
color: color-mix(in srgb, var(--color-muted) 55%, transparent);
text-align: center; line-height: 1.4;
}
.sched-matrix:not(.sched-matrix--day) .mx-closed,
.sched-matrix:not(.sched-matrix--day) .mx-off { display: none; }
.sched-matrix:not(.sched-matrix--day) tbody tr:hover .mx-closed {
display: block; font-size: 10px; font-weight: 700; padding: 2px 0;
color: color-mix(in srgb, var(--color-danger) 70%, transparent);
}
.mx-norm {
display: inline-block; font-size: 10.5px; font-weight: 700;
color: var(--color-warning); background: var(--color-warning-soft);
border-radius: var(--radius-pill); padding: 1px 7px;
}
.sched-matrix__wrap--day { max-height: none; }
.sched-matrix__dayhead { padding: 9px 12px; text-align: left; font-size: 13px; font-weight: 800; }
.sched-matrix__cell--day { padding: 9px 12px; min-width: 0; }
.sched-matrix--day .sched-matrix__pvz { min-width: 220px; }
.sched-matrix__row--closed .sched-matrix__pvzname { color: var(--color-danger); }
.mx-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mx-person {
display: inline-flex; align-items: baseline; gap: 8px;
text-decoration: none; color: var(--color-text);
background: var(--color-surface); border: 1px solid var(--color-border);
border-left: 3px solid var(--color-success);
border-radius: var(--radius-sm); padding: 5px 10px;
transition: border-color .15s var(--ease), background .15s var(--ease);
}
.mx-person:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.mx-person--regular { border-left-color: var(--color-success); }
.mx-person--replacement { border-left-color: var(--color-warning); }
.mx-person__name { font-size: 12.5px; font-weight: 700; }
.mx-person__tag {
font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--color-warning); background: var(--color-warning-soft);
border-radius: var(--radius-pill); padding: 1px 7px;
}
.mx-person__time { font-size: 11.5px; font-weight: 700; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.mx-person__status { font-size: 11px; color: var(--color-muted); }
.mx-person__emp {
font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--color-violet); background: var(--color-violet-soft);
border-radius: var(--radius-pill); padding: 1px 7px;
}
.mx-person--emp-casual .mx-person__emp { color: var(--color-muted); background: var(--color-surface-soft); }
.mx-person__pay {
font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--_pay-line); background: color-mix(in srgb, var(--_pay-line) 16%, transparent);
border-radius: var(--radius-pill); padding: 1px 7px;
}
.mx-person--pay-upfront,
.mx-person--pay-after_shift { border-right: 3px solid var(--_pay-line); }
.mx-person--pay-upfront { --_pay-line: var(--color-cyan); }
.mx-person--pay-after_shift { --_pay-line: var(--color-magenta); }
.mx-person__rate {
font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--color-danger); background: var(--color-danger-soft);
border-radius: var(--radius-pill); padding: 1px 7px;
}
.mx-chip__rate {
margin-left: 3px; font-style: normal; font-weight: 900; font-size: 11px;
color: var(--color-text);
}
.mx-chip__rate--set { color: var(--color-muted); font-weight: 700; }
.mx-person__rate--set {
color: var(--color-muted); background: var(--color-surface-soft);
}
.mx-chip__paid {
margin-left: 3px; font-style: normal; font-weight: 900; font-size: 10.5px;
color: var(--color-success);
}
.mx-person__pay--paid { --_pay-line: var(--color-success); }
.mx-grouprow th {
padding: 0; text-align: left;
background: transparent;
border-bottom: 1px solid var(--color-divider);
}
.mx-grouprow__inner {
position: sticky; left: 0;
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px; max-width: 100%;
}
.mx-grouprow__label { font-weight: 800; letter-spacing: .01em; }
.mx-grouprow__count {
font-size: 10.5px; font-weight: 700; color: var(--color-faint);
background: transparent; border: 0;
border-radius: var(--radius-pill); padding: 1px 0; white-space: nowrap;
}
.mx-grouprow--region .mx-grouprow__label {
font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
color: var(--color-muted);
}
.mx-grouprow--city .mx-grouprow__label { font-size: 12.5px; color: var(--color-text); }
.mx-grouptoggle {
border: 0; background: transparent; cursor: pointer; font: inherit;
color: inherit; text-align: left;
}
.mx-grouptoggle:hover .mx-grouprow__label { color: var(--color-primary-dark); }
.mx-grouptoggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.mx-grouptoggle__chevron { width: 14px; height: 14px; flex: none; transition: transform .15s var(--ease); }
.mx-group.is-collapsed .mx-grouptoggle__chevron { transform: rotate(-90deg); }
.mx-group.is-collapsed [data-matrix-row] { display: none; }
.card.is-matrix-full {
position: fixed; inset: 0; z-index: 60;
margin: 0; border-radius: 0; overflow: hidden;
display: flex; flex-direction: column; gap: 10px;
padding: 12px 16px max(16px, env(safe-area-inset-bottom));
}
body.is-matrix-full { overflow: hidden; }
.card.is-matrix-full .sched-matrix__wrap {
max-height: none; flex: 1 1 auto; min-height: 0;
}
.card.is-matrix-full .mx-legend { margin-bottom: 0; }
.matrix-search { position: relative; display: inline-flex; align-items: center; }
.matrix-search svg {
position: absolute; left: 9px; width: 15px; height: 15px;
color: var(--color-muted); pointer-events: none;
}
.matrix-search .input {
padding-left: 30px; max-width: 250px; min-height: var(--control-h-sm);
padding-top: 6px; padding-bottom: 6px;
}
.mx-nohits td { padding: 22px 12px; color: var(--color-muted); font-size: 13px; }
[data-matrix-row].is-filtered-out,
.mx-group.is-filtered-out { display: none; }
@media (max-width: 819px) {
.sched-matrix__corner, .sched-matrix__pvz { min-width: 150px; }
.sched-matrix__day, .sched-matrix__cell { min-width: 86px; }
.matrix-filter .input { max-width: 170px; }
.matrix-search .input { max-width: 170px; }
}
.srep-period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srep-presets {
display: inline-flex; border-radius: var(--radius-pill); overflow: hidden;
border: 1px solid var(--color-border); background: var(--color-surface-soft);
}
.srep-preset {
border: 0; background: transparent; cursor: pointer;
padding: 5px 12px; font-size: 12px; font-weight: 700; line-height: 1.5;
color: var(--color-muted); white-space: nowrap;
transition: background .12s var(--ease), color .12s var(--ease);
}
.srep-preset + .srep-preset { border-left: 1px solid var(--color-border); }
.srep-preset:hover { background: var(--color-surface); color: var(--color-text); }
.srep-preset:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.srep-preset.is-on {
background: var(--color-primary); color: var(--color-on-primary);
}
a.srep-preset { display: inline-flex; align-items: center; text-decoration: none; }
.srep-date .input { width: 148px; }
.srep-dash { color: var(--color-muted); }
.srep-totals {
display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px;
}
.srep-total {
display: inline-flex; align-items: baseline; gap: 7px;
padding: 7px 13px; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-surface);
border-left: 3px solid var(--_srep-line, var(--color-border));
}
.srep-total b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.srep-total em { font-style: normal; font-size: 12px; font-weight: 650; color: var(--color-muted); }
.srep-total--multi { --_srep-line: var(--color-warning); }
.srep-total--noshow { --_srep-line: var(--color-danger); }
.srep-total--noshow b { color: var(--color-danger); }
.srep-total--unofficial { --_srep-line: var(--color-violet); }
.srep-total--upfront { --_srep-line: var(--color-cyan); }
.srep-total--after { --_srep-line: var(--color-magenta); }
.srep-total--unofficial b { color: var(--color-violet); }
.srep-total--upfront b { color: var(--color-cyan); }
.srep-total--after b { color: var(--color-magenta); }
.srep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.srep-nohits[hidden] { display: none; }
.srep-nohits {
padding: 22px 12px; color: var(--color-muted); font-size: 13px; text-align: center;
}
.srep-card {
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface); overflow: hidden;
transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.srep-card:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.srep-card[open] { box-shadow: var(--shadow-sm); }
.srep-row--emp-unofficial .srep-card { border-left: 3px solid var(--color-violet); }
.srep-row--emp-casual .srep-card { border-left: 3px solid var(--color-muted); }
.srep-card__head {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 11px 14px; cursor: pointer; list-style: none;
}
.srep-card__head::-webkit-details-marker { display: none; }
.srep-card__head:hover { background: var(--color-surface-soft); }
.srep-card__who { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; }
.srep-card__name { font-size: 13.5px; font-weight: 750; }
.srep-emp {
font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--color-violet); background: var(--color-violet-soft);
border-radius: var(--radius-pill); padding: 1px 7px;
}
.srep-emp--casual { color: var(--color-muted); background: var(--color-surface-soft); }
.srep-card__where { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 260px; min-width: 0; }
.srep-point {
display: inline-flex; align-items: baseline; gap: 5px;
font-size: 11.5px; font-weight: 650; color: var(--color-text);
background: var(--color-surface-soft); border: 1px solid var(--color-border);
border-radius: var(--radius-pill); padding: 2px 9px;
}
.srep-point b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.srep-point--replacement {
color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 38%, transparent);
background: var(--color-warning-soft);
}
.srep-point--replacement b { color: var(--color-warning); }
.srep-card__nums { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.srep-num { display: inline-flex; align-items: baseline; gap: 5px; }
.srep-num b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.srep-num em { font-style: normal; font-size: 11px; color: var(--color-muted); }
.srep-num--replacement b { color: var(--color-warning); }
.srep-num--upfront b { color: var(--color-cyan); }
.srep-num--after b { color: var(--color-magenta); }
.srep-card__chevron { width: 16px; height: 16px; color: var(--color-muted); transition: transform .16s var(--ease); }
.srep-card[open] .srep-card__chevron { transform: rotate(180deg); }
.srep-days {
list-style: none; margin: 0; padding: 8px;
border-top: 1px solid var(--color-border); background: var(--color-surface-soft);
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px;
}
.srep-day { min-width: 0; }
.srep-day__link {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
text-decoration: none; color: var(--color-text);
padding: 6px 10px; border-radius: var(--radius-sm);
border: 1px solid var(--color-border); background: var(--color-surface);
border-left: 3px solid var(--color-border);
}
.srep-day__link:hover { border-color: var(--color-primary); }
.srep-day--replacement .srep-day__link { border-left-color: var(--color-warning); }
.srep-day--pay-upfront .srep-day__link { border-left-color: var(--color-cyan); }
.srep-day--pay-after_shift .srep-day__link { border-left-color: var(--color-magenta); }
.srep-day__date {
display: inline-flex; align-items: baseline; gap: 5px; flex: none;
font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.srep-day__date em { font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--color-muted); }
.srep-day__pvz {
font-size: 12px; color: var(--color-muted);
flex: 1 1 90px; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srep-day__tags { display: inline-flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.srep-tag {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
border-radius: var(--radius-pill); padding: 1px 6px;
color: var(--color-muted); background: var(--color-surface);
border: 1px solid var(--color-border);
}
.srep-tag--replacement { color: var(--color-warning); background: var(--color-warning-soft); border-color: transparent; }
.srep-tag--pay-upfront {
color: var(--color-cyan); border-color: transparent;
background: color-mix(in srgb, var(--color-cyan) 18%, transparent);
}
.srep-tag--pay-after_shift {
color: var(--color-magenta); border-color: transparent;
background: color-mix(in srgb, var(--color-magenta) 18%, transparent);
}
.pay-badge {
display: inline-block; font-size: 11.5px; font-weight: 800;
border-radius: var(--radius-pill); padding: 2px 10px;
color: var(--_pay-line); background: color-mix(in srgb, var(--_pay-line) 16%, transparent);
}
.pay-badge--upfront { --_pay-line: var(--color-cyan); }
.pay-badge--after_shift { --_pay-line: var(--color-magenta); }
.pay-badge--paid { --_pay-line: var(--color-success); }
@media (max-width: 819px) {
.srep-card__nums { margin-left: 0; }
.srep-card__who { min-width: 0; }
.srep-days { grid-template-columns: 1fr; }
}
.srep-total--due { --_srep-line: var(--color-magenta); }
.srep-total--paid { --_srep-line: var(--color-success); }
.srep-total--due b { color: var(--color-magenta); }
.srep-total--paid b { color: var(--color-success); }
.srep-num--due b { color: var(--color-magenta); }
.srep-num--paid b { color: var(--color-success); }
.payout-bulk {
display: flex; justify-content: flex-end;
padding: 8px 8px 0; background: var(--color-surface-soft);
border-top: 1px solid var(--color-border);
}
.payout-bulk + .payout-days { border-top: 0; }
.payout-days { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.payout-day {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 4px 6px; border-radius: var(--radius-sm);
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.payout-day .srep-day__link { flex: 1 1 220px; border: 0; border-left: 3px solid var(--color-border); border-radius: 0; background: transparent; }
.payout-day .srep-day__link:hover { background: var(--color-surface-soft); }
.payout-day--paid { background: var(--color-surface-soft); }
.payout-day--paid .srep-day__link { border-left-color: var(--color-success); opacity: .85; }
.payout-day__money {
display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px;
flex: none; min-width: 96px;
}
.payout-sum { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.payout-sum--paid { color: var(--color-success); }
.payout-sum--unknown {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
color: var(--color-danger); text-align: right;
}
.payout-state { font-size: 10.5px; font-weight: 650; color: var(--color-muted); }
.payout-day__act { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.payout-amount {
width: 104px; padding: 3px 8px; height: auto; line-height: 1.5;
font-size: 12px; font-weight: 700;
text-align: right; font-variant-numeric: tabular-nums;
}
.payout-amount::-webkit-outer-spin-button,
.payout-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.payout-amount { -moz-appearance: textfield; appearance: textfield; }
@media (max-width: 819px) {
.payout-days { grid-template-columns: 1fr; }
.payout-day__money { align-items: flex-start; }
.payout-day__act { flex: 1 1 100%; justify-content: flex-end; }
}
.cell-modal[hidden] { display: none; }
.cell-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.cell-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg-deep) 72%, transparent); backdrop-filter: blur(6px); }
.cell-modal__dialog {
position: relative; width: min(560px, 100%); max-height: calc(88vh * var(--vu)); overflow: auto;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 20px;
}
.cell-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cell-modal__eyebrow { color: var(--color-muted); font-size: 12.5px; font-weight: 700; }
.cell-modal__title { margin-top: 2px; font-size: 18px; font-weight: 850; }
.cell-modal__sub { margin-top: 2px; font-size: 12.5px; color: var(--color-muted); }
.cell-modal__note { margin-top: 12px; }
.cell-modal__section { margin-top: 18px; }
.cell-modal__subtitle {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 800; margin-bottom: 8px;
}
.cell-modal__assigned { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cell-modal__assigned li {
display: flex; align-items: center; gap: 6px 8px; font-size: 13px; flex-wrap: wrap;
padding: 9px 0; border-bottom: 1px solid var(--color-border);
}
.cell-modal__assigned li:last-child { border-bottom: 0; }
.cell-payout {
display: inline-flex; flex: none; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-surface-soft);
overflow: hidden;
}
.cell-modal__paykey { margin: -2px 0 8px; }
.cell-payout__btn {
border: 0; background: transparent; cursor: pointer;
padding: 3px 9px; font-size: 11px; font-weight: 700; line-height: 1.5;
color: var(--color-muted); white-space: nowrap;
transition: background .12s var(--ease), color .12s var(--ease);
}
.cell-payout__btn + .cell-payout__btn { border-left: 1px solid var(--color-border); }
.cell-payout__btn:hover { background: var(--color-surface); color: var(--color-text); }
.cell-payout__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.cell-payout__btn.is-on {
color: var(--color-text); font-weight: 800;
background: color-mix(in srgb, var(--color-text) 14%, var(--color-surface));
}
.cell-payout__btn--upfront.is-on {
color: var(--color-cyan);
background: color-mix(in srgb, var(--color-cyan) 26%, var(--color-surface));
}
.cell-payout__btn--after.is-on {
color: var(--color-magenta);
background: color-mix(in srgb, var(--color-magenta) 26%, var(--color-surface));
}
.cell-paid {
flex: none; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-surface-soft);
}
.cell-paid.is-on {
color: var(--color-success); font-weight: 800; border-color: transparent;
background: color-mix(in srgb, var(--color-success) 26%, var(--color-surface));
}
.cell-rate {
position: relative; display: inline-flex; align-items: center; flex: none;
}
.cell-rate__input {
width: 92px; padding: 3px 20px 3px 8px; font-size: 12px; font-weight: 700;
text-align: right; height: auto; line-height: 1.5;
}
.cell-rate__input::-webkit-outer-spin-button,
.cell-rate__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell-rate__input { -moz-appearance: textfield; appearance: textfield; }
.cell-rate__input::placeholder { font-weight: 500; color: var(--color-muted); }
.cell-rate__currency {
position: absolute; right: 7px; pointer-events: none;
font-size: 11px; color: var(--color-muted);
}
.cell-rate--set .cell-rate__input {
border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.cell-rate--missing .cell-rate__input {
border-color: var(--color-danger);
background: var(--color-danger-soft);
}
.cell-modal__rate { grid-column: 1 / -1; }
.cell-modal__rate .input { max-width: 200px; }
.cell-releaseall { flex: none; }
.cell-releaseall:hover { color: var(--color-danger); background: var(--color-danger-soft); }
.cell-clearall { margin-left: auto; color: var(--color-danger); flex: none; }
.cell-clearall:hover { background: var(--color-danger-soft); }
.cell-modal__dialog--sm { width: min(480px, 100%); }
.cell-release__lead { margin-top: 12px; font-size: 12.5px; line-height: 1.5; }
.cell-release .form-field + .form-field { margin-top: 14px; }
.cell-release__list {
margin: 12px 0 0; padding: 0; list-style: none;
display: flex; flex-direction: column; gap: 4px;
max-height: 190px; overflow: auto;
}
.cell-release__list li {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
padding: 7px 10px; border-radius: var(--radius-sm);
background: var(--color-surface-soft); font-size: 12.5px;
}
.cell-release__list li.is-here { background: var(--color-danger-soft); }
.cell-release__where { color: var(--color-muted); flex: 1 1 auto; min-width: 0; }
.cell-release__count { font-weight: 800; }
.cell-release__span { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.cell-modal__list .assign-row { flex-wrap: wrap; }
.assign-row__shift {
flex: 1 0 100%; min-width: 0;
display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
padding-left: 31px; margin-top: 4px;
}
.assign-row__card { display: inline-flex; text-decoration: none; }
.assign-row__card:hover { filter: brightness(1.12); }
.assign-row__card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-pill); }
.cell-modal__list { max-height: none; overflow: visible; margin-top: 8px; }
.cell-modal__others .cell-modal__list { max-height: 312px; overflow: auto; }
.cell-modal__others { margin-top: 12px; border-top: 1px solid var(--color-divider); padding-top: 12px; }
.cell-modal__others summary {
display: flex; align-items: center; gap: 8px; cursor: pointer;
font-size: 13px; font-weight: 750;
list-style: none;
}
.cell-modal__others summary::-webkit-details-marker { display: none; }
.cell-modal__others summary::after {
content: "▾"; margin-left: auto; color: var(--color-muted);
font-size: 11px; line-height: 1; transition: transform .16s var(--ease);
}
.cell-modal__others[open] summary::after { transform: rotate(180deg); }
.cell-modal__search { margin-top: 10px; }
.cell-modal__params { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.cell-modal__payout { grid-column: 1 / -1; }
.cell-modal__repeat { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.cell-modal__repeat .field__hint { grid-column: 1 / -1; }
.cell-oneoff {
display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
padding: 13px 15px; border-radius: var(--radius-lg);
border: 0; background: var(--color-surface-soft);
transition: box-shadow .14s var(--ease), background .14s var(--ease);
}
.cell-oneoff:hover { background: color-mix(in srgb, var(--color-warning) 7%, var(--color-surface-soft)); }
.cell-oneoff.is-on {
background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
box-shadow: inset 0 0 0 1.5px var(--color-warning);
}
.cell-oneoff input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--color-warning); flex: none; }
.cell-oneoff__body { display: flex; flex-direction: column; gap: 2px; }
.cell-oneoff__title { font-size: 13.5px; font-weight: 800; }
.cell-oneoff.is-on .cell-oneoff__title { color: var(--color-warning-dark, var(--color-warning)); }
.cell-oneoff__hint { font-size: 12px; color: var(--color-muted); line-height: 1.35; }
[data-oneoff-type].is-locked select { opacity: .5; pointer-events: none; }
.cell-oneoff__casual[hidden],
.cell-oneoff__lock[hidden] { display: none; }
.cell-oneoff__casual { display: block; margin-top: 10px; }
.cell-oneoff__casual .field__hint { line-height: 1.4; display: block; margin-top: 6px; }
.cell-oneoff__fields { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
@media (max-width: 620px) {
.cell-oneoff__fields { grid-template-columns: 1fr; }
}
.cell-oneoff__lock { display: block; margin-top: 4px; color: var(--color-warning); font-weight: 700; }
.cell-modal__foot {
position: sticky; bottom: -20px; z-index: 2;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 20px -20px -20px; padding: 16px 20px;
background: var(--color-surface);
border-top: 1px solid var(--color-divider);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
flex-wrap: wrap;
}
@media (max-width: 620px) {
.cell-modal__foot { bottom: -14px; margin: 16px -14px -14px; padding: 14px; }
}
.cell-modal__foot-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 620px) {
.cell-modal { padding: 10px; }
.cell-modal__dialog { padding: 14px; max-height: calc(94vh * var(--vu)); }
.cell-modal__params { grid-template-columns: 1fr; }
}
.tab-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab {
padding: 8px 14px; border-radius: var(--radius-pill); text-decoration: none;
background: var(--color-surface); border: 1px solid var(--color-border);
font-size: 13px; font-weight: 700; color: var(--color-muted);
transition: border-color .15s var(--ease), color .15s var(--ease);
}
.tab:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.tab--active { background: var(--color-primary-soft); color: var(--color-primary-dark); border-color: transparent; }
.shift-list__item--card { text-decoration: none; color: inherit; transition: border-color .15s var(--ease), transform .12s var(--ease); }
.shift-list__item--card:hover { border-color: var(--color-primary); transform: translateX(1px); }
.shift-accent--planned { border-left-color: var(--color-primary); }
.shift-accent--confirmed { border-left-color: var(--color-primary-dark); }
.shift-accent--worked { border-left-color: var(--color-success); }
.shift-accent--no_show { border-left-color: var(--color-danger); }
.shift-accent--cancelled { border-left-color: var(--color-muted); }
@media (max-width: 1024px) {
.metric-grid--shift { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 819px) {
.calendar__cell { min-height: 78px; padding: 5px; }
.cal-pill__name { display: none; }
}
@media (max-width: 720px) {
.filters-bar--shift,
.metric-grid--shift { grid-template-columns: 1fr; }
.shift-form { max-width: none; }
.calendar__weekday { font-size: 0; }
.calendar__weekday::first-letter { font-size: 11.5px; }
}
.badge--on_time { background: var(--color-success-soft); color: var(--color-success); }
.badge--late { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--missing { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--manual_review { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--proc_new { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--proc_checking { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--proc_confirmed { background: var(--color-success-soft); color: var(--color-success); }
.badge--proc_rejected { background: var(--color-surface-soft); color: var(--color-muted); }
.badge--proc_counted { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary-dark); }
.metric-grid--opening { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.filters-bar--opening,
.filters-bar--acceptance,
.filters-bar--violations {
grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.filters-bar--opening .filters-bar__search,
.filters-bar--acceptance .filters-bar__search,
.filters-bar--violations .filters-bar__search { grid-column: 1 / -1; }
.filters-bar--cabinet { grid-template-columns: 1fr 1fr 1fr auto; }
.filters-bar__check {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--color-muted); white-space: nowrap;
}
.field__error { display: block; color: var(--color-danger); font-size: 12px; margin-top: 4px; }
.field__error[hidden] { display: none; }
.delete-gate-hint { align-self: center; font-size: 12.5px; color: var(--color-muted); }
.delete-gate-hint[hidden] { display: none; }
.form-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.opening-block {
display: flex; flex-direction: column; gap: 10px;
padding: 14px 0; margin: 12px 0; border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.opening-block--state { padding: 0; margin: 12px 0 0; border-top: 0; border-bottom: 0; }
.opening-accent--on_time { border-left-color: var(--color-success); }
.opening-accent--late { border-left-color: var(--color-warning); }
.opening-accent--missing { border-left-color: var(--color-danger); }
.opening-accent--manual_review { border-left-color: var(--color-primary); }
.opening-accent--cancelled { border-left-color: var(--color-muted); }
@media (max-width: 1024px) {
.metric-grid--opening { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.filters-bar--opening,
.filters-bar--cabinet,
.metric-grid--opening { grid-template-columns: 1fr; }
}
.badge--waiting_handover { background: var(--color-surface-soft); color: var(--color-muted); }
.badge--in_progress { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--overdue { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--missing_finish { background: var(--color-danger-soft); color: var(--color-danger); }
.metric-grid--acceptance { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.acceptance-block {
display: flex; flex-direction: column; gap: 10px;
padding: 14px 0; margin: 12px 0; border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.acceptance-timer {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 14px; border-radius: 12px;
background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.acceptance-timer--missing_finish { background: var(--color-danger-soft); color: var(--color-danger); }
.acceptance-timer__label { font-size: 13px; font-weight: 600; }
.acceptance-timer__value { font-size: 16px; font-weight: 800; }
.acceptance-timer__value--danger { color: var(--color-danger); }
.acceptance-accent--waiting_handover { border-left-color: var(--color-muted); }
.acceptance-accent--in_progress { border-left-color: var(--color-primary); }
.acceptance-accent--on_time { border-left-color: var(--color-success); }
.acceptance-accent--overdue { border-left-color: var(--color-warning); }
.acceptance-accent--missing_finish { border-left-color: var(--color-danger); }
.acceptance-accent--manual_review { border-left-color: var(--color-primary); }
.acceptance-accent--cancelled { border-left-color: var(--color-muted); }
@media (max-width: 1024px) {
.metric-grid--acceptance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.filters-bar--acceptance { grid-template-columns: 1fr; }
.metric-grid--acceptance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mono {
font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--color-muted);
}
.yandex-card { display: flex; flex-direction: column; gap: 14px; }
.yandex-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.yandex-map-link-card {
min-height: 178px; padding: 18px;
display: flex; align-items: center; gap: 14px;
color: inherit; text-decoration: none;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background:
linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 46%),
var(--color-surface-soft);
transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.yandex-map-link-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
box-shadow: var(--shadow-card);
}
.yandex-map-link-card__icon {
width: 52px; height: 52px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
color: var(--color-primary-dark);
background: var(--color-primary-soft); border-radius: var(--radius-md);
}
.yandex-map-link-card__icon svg { width: 30px; height: 30px; }
.yandex-map-link-card strong,
.yandex-map-link-card span span { display: block; }
.yandex-map-link-card span span { margin-top: 5px; color: var(--color-muted); font-size: 13px; }
.yandex-empty {
min-height: 220px; border: 1px dashed var(--color-border);
border-radius: var(--radius-md); background: var(--color-surface-soft);
}
.yandex-reviews { display: flex; flex-direction: column; gap: 14px; }
.yandex-reviews-widget {
position: relative; min-height: 500px; width: 100%;
overflow: hidden; border: 1px solid var(--color-border);
border-radius: var(--radius-md); background: var(--color-surface-soft);
}
.yandex-reviews-widget__iframe {
position: relative; z-index: 2;
width: 100%; min-height: 500px; height: min(calc(72vh * var(--vu)), 680px);
border: 0; display: block; background: transparent;
}
.yandex-reviews-widget__loader,
.yandex-reviews-widget__error {
position: absolute; inset: 0; z-index: 1;
display: flex; flex-direction: column; justify-content: center; gap: 12px;
padding: 28px; color: var(--color-muted);
}
.yandex-reviews-widget__error {
z-index: 3; align-items: center; text-align: center;
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}
.skeleton {
display: block; border-radius: 999px;
background: linear-gradient(90deg, var(--color-surface-soft), color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)), var(--color-surface-soft));
background-size: 220% 100%;
animation: skeleton-shimmer 1.35s linear infinite;
}
.skeleton--line { height: 18px; width: min(100%, 620px); }
.skeleton--short { width: min(64%, 380px); }
@keyframes skeleton-shimmer {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
@media (max-width: 768px) {
.yandex-map-link-card { align-items: flex-start; }
.yandex-reviews-widget,
.yandex-reviews-widget__iframe { min-height: 500px; height: 500px; }
}
.badge--v_new { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--v_checking { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--v_confirmed { background: var(--color-success-soft); color: var(--color-success); }
.badge--v_rejected { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--v_counted_kpi { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary-dark); }
.badge--v_ignored { background: var(--color-surface-soft); color: var(--color-muted); }
.badge--sev_low { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--sev_medium { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--sev_high { background: color-mix(in srgb, var(--color-warning) 30%, var(--color-danger-soft)); color: var(--color-danger); }
.badge--sev_critical { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--vt_opening_late, .badge--vt_acceptance_overdue { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--vt_opening_missing, .badge--vt_acceptance_missing_finish,
.badge--vt_shift_no_show, .badge--vt_claim_related { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--vt_manual, .badge--vt_schedule_violation { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--vt_other { background: var(--color-surface-soft); color: var(--color-muted); }
.metric-grid--violations { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 880px) {
.metric-grid--violations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.filters-bar--violations { grid-template-columns: 1fr; }
.metric-grid--violations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.badge--c_new { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--c_in_review { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--c_linked { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary-dark); }
.badge--c_employee_response_requested { background: color-mix(in srgb, var(--color-warning) 45%, var(--color-danger-soft)); color: var(--color-danger); }
.badge--c_resolved { background: var(--color-success-soft); color: var(--color-success); }
.badge--c_settled { background: var(--color-success-soft); color: var(--color-success); }
.badge--c_rejected { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--c_cancelled { background: var(--color-surface-soft); color: var(--color-muted); }
.badge--c_counted_kpi { background: color-mix(in srgb, var(--color-primary) 30%, transparent); color: var(--color-primary-dark); }
.badge--cat_acceptance_deadline,
.badge--cat_opening_violation { background: color-mix(in srgb, var(--color-warning) 35%, var(--color-danger-soft)); color: var(--color-danger); }
.badge--cat_wrong_issue,
.badge--cat_wrong_acceptance,
.badge--cat_schedule_violation { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--cat_lost_item,
.badge--cat_damaged_item { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--cat_standard_violation { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--cat_client_complaint { background: color-mix(in srgb, var(--color-danger) 35%, var(--color-warning-soft)); color: var(--color-danger); }
.badge--cat_other { background: var(--color-surface-soft); color: var(--color-muted); }
.metric-grid--claims { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.filters-bar.filters-bar--claims,
.filters-bar.filters-bar--audit,
.filters-bar.filters-bar--kpi {
display: flex; flex-direction: column; align-items: stretch;
gap: 10px; padding: 14px 0 4px;
}
.filters-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.filters-row > .input { flex: 0 1 auto; width: auto; min-width: 148px; }
.filters-row > .pvz-pick { flex: 0 1 auto; min-width: 168px; }
.filters-row > .btn { margin-left: auto; }
.filters-row > .btn + .btn { margin-left: 0; }
.filters-bar--audit .filters-row > select.input,
.filters-bar--audit .filters-more__grid > select.input,
.filters-bar--kpi .filters-row > select.input { max-width: 230px; }
.filters-range { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.filters-range__label {
font-size: 12.5px; font-weight: 650; color: var(--color-muted); white-space: nowrap; padding-right: 2px;
}
.filters-range__dash { color: var(--color-faint); }
.filters-range .input { width: auto; flex: 0 1 auto; min-width: 118px; }
.period-quick {
display: inline-flex; align-items: center; flex: 0 1 auto;
height: var(--control-h); padding: 3px; gap: 2px;
background: var(--color-surface-soft); border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.period-quick__item {
display: inline-flex; align-items: center; padding: 0 11px; height: 100%;
border-radius: calc(var(--radius-md) - 4px);
font-size: 12.5px; font-weight: 650; color: var(--color-muted);
white-space: nowrap; text-decoration: none;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.period-quick__item:hover { color: var(--color-text); background: var(--color-surface); }
.period-quick__item.is-active {
background: var(--color-primary); color: var(--color-on-primary);
}
html[data-theme="dark"] .period-quick__item.is-active {
background: var(--color-primary-strong);
}
@media (max-width: 640px) {
.period-quick { width: 100%; justify-content: space-between; }
.period-quick__item { flex: 1 1 0; justify-content: center; padding: 0 6px; }
}
.filters-more { border-top: 1px solid var(--color-border); padding-top: 8px; }
.filters-more__toggle {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
font-size: 13px; font-weight: 650; color: var(--color-muted);
list-style: none; user-select: none; width: max-content;
padding: 4px 2px; border-radius: var(--radius-sm);
}
.filters-more__toggle::-webkit-details-marker { display: none; }
.filters-more__toggle:hover { color: var(--color-text); }
.filters-more__toggle svg { width: 15px; height: 15px; transition: transform .18s var(--ease); }
.filters-more[open] > .filters-more__toggle { color: var(--color-text); }
.filters-more[open] > .filters-more__toggle svg { transform: rotate(180deg); }
.filters-more__count {
min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
background: var(--color-primary-soft); color: var(--color-primary-dark);
font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.filters-more__grid {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0 4px;
}
.filters-more__grid > .input { flex: 0 1 auto; width: auto; min-width: 158px; }
@media (max-width: 880px) {
.metric-grid--claims { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.metric-grid--claims { grid-template-columns: 1fr; }
.filters-row > .input,
.filters-row > .pvz-pick,
.filters-more__grid > .input,
.filters-range { flex: 1 1 100%; width: 100%; }
.filters-row > .btn { margin-left: 0; width: 100%; }
.filters-bar--audit .filters-row > select.input,
.filters-bar--audit .filters-more__grid > select.input,
.filters-bar--kpi .filters-row > select.input { max-width: none; }
.filters-range { flex-wrap: wrap; }
.filters-range__label { flex: 1 1 100%; }
.filters-range .input { flex: 1 1 120px; min-width: 0; }
}
.camera-panel__head { align-items: flex-start; }
.camera-panel__subtitle { margin-top: 3px; color: var(--color-muted); font-size: 12.5px; }
.camera-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.camera-card {
display: flex; flex-direction: column; gap: 12px;
min-width: 0; padding: 14px; border: 1px solid var(--color-border);
border-radius: var(--radius-md); background: var(--color-surface-soft);
}
.camera-card__media {
position: relative; min-height: 126px; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.82); background:
linear-gradient(150deg, rgba(16,18,22,.97), rgba(23,32,50,.9)),
radial-gradient(circle at 80% 12%, rgba(0,91,255,.45), transparent 48%);
overflow: hidden;
}
.camera-card__media::after {
content: ""; position: absolute; inset: 0;
background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px);
}
.camera-card__icon { position: relative; z-index: 1; width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; }
.camera-card__icon svg { width: 54px; height: 54px; }
.camera-live {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 9px; border-radius: var(--radius-pill);
border: 1px solid transparent;
background: color-mix(in srgb, var(--color-danger) 88%, #000);
color: #fff; font-size: 11px; font-weight: 850; letter-spacing: .08em;
}
.camera-live::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff;
box-shadow: 0 0 0 0 rgba(255,255,255,.68); animation: live-pulse 1.45s infinite;
}
.camera-live--checking,
.camera-live--off {
background: color-mix(in srgb, var(--color-surface) 84%, var(--color-border));
border-color: var(--color-border); color: var(--color-muted);
font-weight: 750; letter-spacing: .02em;
}
.camera-live--checking::before,
.camera-live--off::before { background: currentColor; box-shadow: none; animation: none; }
.camera-live--checking::before { animation: live-blink 1.5s ease-in-out infinite; }
.camera-card__media .camera-live--checking,
.camera-card__media .camera-live--off {
background: rgba(7,11,18,.6); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.84);
}
@keyframes live-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.camera-card__media .camera-live { position: absolute; z-index: 2; top: 10px; left: 10px; }
.camera-card__play {
position: absolute; inset: 0; z-index: 3;
display: flex; align-items: center; justify-content: center;
border: 0; padding: 0; cursor: pointer; color: #fff;
background: transparent; transition: background .18s ease;
}
.camera-card__play:hover,
.camera-card__play:focus-visible {
outline: none;
background: linear-gradient(to top, rgba(0,91,255,.30), rgba(7,11,18,.10));
}
.camera-card__play-icon {
display: grid; place-items: center; width: 52px; height: 52px;
border-radius: 50%; background: rgba(7,11,18,.55); backdrop-filter: blur(3px);
border: 1.5px solid rgba(255,255,255,.55);
opacity: 0; transform: scale(.9);
transition: opacity .18s ease, transform .18s ease;
}
.camera-card__play:hover .camera-card__play-icon,
.camera-card__play:focus-visible .camera-card__play-icon { opacity: 1; transform: scale(1); }
.camera-card__play-icon svg { width: 20px; height: 20px; margin-left: 2px; }
@media (hover: none) { .camera-card__play-icon { opacity: .8; } }
.camera-card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.camera-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.camera-card__title { min-width: 0; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.camera-card__description { color: var(--color-muted); font-size: 13px; min-height: 38px; }
.camera-card__meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--color-muted); font-size: 12px; }
.camera-card__meta span {
display: inline-flex; padding: 4px 8px; border-radius: var(--radius-pill);
background: var(--color-surface); border: 1px solid var(--color-border);
}
.camera-card__actions,
.camera-card__admin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.camera-card__admin { padding-top: 10px; border-top: 1px solid var(--color-border); }
.camera-status {
display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
padding: 4px 9px; border-radius: var(--radius-pill); font-size: 11px;
font-weight: 800;
}
.camera-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.camera-status--online { background: var(--color-success-soft); color: var(--color-success); }
.camera-status--offline { background: var(--color-surface); color: var(--color-muted); }
.camera-status--unknown { background: var(--color-warning-soft); color: var(--color-warning); }
.camera-status--error { background: var(--color-danger-soft); color: var(--color-danger); }
.camera-modal[hidden] { display: none; }
.camera-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.camera-modal__backdrop { position: absolute; inset: 0; background: rgba(7,17,31,.72); backdrop-filter: blur(9px); }
.camera-modal__dialog {
position: relative; z-index: 1; width: min(1120px, 100%); max-height: min(calc(86vh * var(--vu)), 860px);
display: flex; flex-direction: column; gap: 14px; padding: 18px;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-pop);
}
.camera-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.camera-modal__pvz { color: var(--color-muted); font-size: 12.5px; font-weight: 650; }
.camera-modal__title { margin-top: 3px; font-size: 20px; font-weight: 850; }
.camera-modal__head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.camera-player {
position: relative; min-height: 420px; border-radius: var(--radius-md);
overflow: hidden; background: var(--color-bg-deep); border: 1px solid rgba(255,255,255,.08);
}
.camera-player--page { min-height: min(calc(68vh * var(--vu)), 720px); }
.camera-player__loader {
position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
color: rgba(255,255,255,.82); pointer-events: none;
}
.camera-player__loader[hidden] { display: none; }
.camera-player__stage { position: absolute; inset: 0; }
.camera-player__stage,
.camera-player__stage video,
.camera-player__stage iframe,
.camera-player__stage img { width: 100%; height: 100%; min-height: inherit; }
.camera-player__stage video,
.camera-player__stage iframe,
.camera-player__stage img { display: block; border: 0; object-fit: contain; background: var(--color-bg-deep); }
.camera-player__message {
min-height: inherit; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 4px; padding: 40px 28px; text-align: center;
color: rgba(255,255,255,.72);
background:
radial-gradient(120% 90% at 50% 30%, rgba(255,255,255,.05), transparent 62%),
var(--color-bg-deep);
}
.camera-player__message-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px; margin-bottom: 12px; border-radius: 50%;
color: rgba(255,255,255,.68);
background: rgba(255,255,255,.06);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.camera-player__message-icon svg { width: 30px; height: 30px; }
.camera-player__message-title {
font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
color: rgba(255,255,255,.94);
}
.camera-player__message-text {
max-width: 42ch; font-size: 13.5px; line-height: 1.55;
color: rgba(255,255,255,.6);
}
.camera-player__message-retry,
.camera-player__message > .btn { margin-top: 16px; }
.camera-player__message--warning .camera-player__message-icon {
color: #f7d28d;
background: rgba(247,210,141,.13);
box-shadow: inset 0 0 0 1px rgba(247,210,141,.28);
}
.camera-player__message--error .camera-player__message-icon {
color: #ff9da0;
background: rgba(255,157,160,.13);
box-shadow: inset 0 0 0 1px rgba(255,157,160,.28);
}
.camera-watch { gap: 16px; }
.camera-modal-open, .quick-modal-open { overflow: hidden; }
.camrow-list { display: flex; flex-direction: column; gap: 18px; }
.camrow {
padding: 14px 16px 16px; border: 1px solid var(--color-border);
border-radius: var(--radius-lg); background: var(--color-surface);
}
.camrow__head {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding-bottom: 12px; margin-bottom: 14px;
border-bottom: 1px solid var(--color-border);
}
.camrow__pvz {
display: inline-flex; align-items: center; gap: 8px; min-width: 0;
color: var(--color-text); font-weight: 800; text-decoration: none;
}
.camrow__pvz:hover .camrow__name { color: var(--color-primary); }
.camrow__pvz svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--color-muted); }
.camrow__code {
flex: 0 0 auto; padding: 3px 9px; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-surface-soft);
font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.camrow__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.camrow__count { margin-left: auto; color: var(--color-muted); font-size: 12.5px; font-weight: 650; }
.camrow__cameras { display: flex; flex-wrap: wrap; gap: 14px; }
.camrow__cameras .camera-card--net { flex: 1 1 300px; max-width: 460px; min-width: 260px; }
.camera-card--net { border-width: 2px; transition: border-color .2s ease, box-shadow .2s ease; }
.camera-card--opened {
border-color: color-mix(in srgb, var(--color-success) 62%, var(--color-border));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-success) 28%, transparent),
0 10px 26px -14px color-mix(in srgb, var(--color-success) 55%, transparent);
}
.camera-card--late {
border-color: color-mix(in srgb, var(--color-warning) 70%, var(--color-border));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 32%, transparent),
0 10px 26px -14px color-mix(in srgb, var(--color-warning) 60%, transparent);
}
.camera-card--unopened {
border-color: color-mix(in srgb, var(--color-danger) 70%, var(--color-border));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-danger) 34%, transparent),
0 10px 26px -14px color-mix(in srgb, var(--color-danger) 60%, transparent);
}
.camrow--late { border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border)); }
.camrow--unopened { border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border)); }
.camrow__add {
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
padding: 5px 11px 5px 8px; border-radius: var(--radius-pill);
border: 1px dashed var(--color-border); background: transparent;
color: var(--color-muted); font-size: 12.5px; font-weight: 750; cursor: pointer;
transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.camrow__add svg { width: 14px; height: 14px; }
.camrow__add:hover {
color: var(--color-primary-dark); border-color: var(--color-primary);
border-style: solid; background: var(--color-primary-soft);
}
.camrow__add:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.camera-card--fresh { animation: camera-card-fresh 1.6s var(--ease) backwards; }
@keyframes camera-card-fresh {
0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 55%, transparent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.camgap {
margin-top: 18px; padding: 14px 16px;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface);
}
.camgap[open] { padding-bottom: 16px; }
.camgap__summary {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
cursor: pointer; list-style: none;
}
.camgap[open] > .camgap__summary {
margin-bottom: 14px; padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.camgap__summary::-webkit-details-marker { display: none; }
.camgap__summary::before {
content: "›"; color: var(--color-muted); font-size: 16px; font-weight: 800;
transition: transform .15s var(--ease); transform-origin: center;
}
.camgap[open] > .camgap__summary::before { transform: rotate(90deg); }
.camgap__title { font-size: 15px; font-weight: 800; }
.camgap__sub { color: var(--color-muted); font-size: 12.5px; font-weight: 650; }
.camgap__search { max-width: 340px; margin-bottom: 10px; }
.camgap__empty { color: var(--color-muted); font-size: 13px; margin-top: 10px; }
.camgap__empty[hidden] { display: none; }
.camgap__grid {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.camgap__item {
display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0;
padding: 9px 10px 9px 11px; border: 1px dashed var(--color-border);
border-radius: var(--radius-md); background: var(--color-surface-soft);
color: var(--color-text); font-family: inherit; text-align: left; cursor: pointer;
transition: border-color .15s var(--ease), background .15s var(--ease);
}
.camgap__item:hover, .camgap__item:focus-visible {
border-color: var(--color-primary); border-style: solid;
background: var(--color-primary-soft); outline: none;
}
.camgap__name {
min-width: 0; flex: 1 1 auto;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 13.5px; color: var(--color-muted);
}
.camgap__item:hover .camgap__name { color: var(--color-primary-dark); }
.camgap__plus {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--color-surface); color: var(--color-muted);
}
.camgap__plus svg { width: 13px; height: 13px; }
.camgap__item:hover .camgap__plus { background: var(--color-primary); color: var(--color-on-primary); }
.page__actions--cams { align-items: flex-start; }
.cams-add svg { width: 16px; height: 16px; }
.cams-openbar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-bottom: 16px; padding: 12px 16px;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface);
}
.cams-openbar__icon {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: var(--radius-md);
background: var(--color-surface-soft); color: var(--color-muted);
}
.cams-openbar__icon svg { width: 19px; height: 19px; }
.cams-openbar__lead { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.cams-openbar__title { font-size: 14px; font-weight: 800; }
.cams-openbar__hint { color: var(--color-muted); font-size: 12.5px; line-height: 1.35; }
.cams-openbar .open-all { flex: 0 0 auto; align-items: flex-end; }
@media (max-width: 720px) {
.cams-openbar { align-items: flex-start; }
.cams-openbar .open-all { width: 100%; align-items: flex-start; }
.cams-openbar__lead { flex-basis: 0; }
}
.camadd[hidden], .qadd[hidden] { display: none; }
.camadd, .qadd { position: fixed; inset: 0; z-index: 122; display: grid; place-items: center; padding: 24px; }
.camadd__backdrop, .qadd__backdrop { position: absolute; inset: 0; background: rgba(7,17,31,.66); backdrop-filter: blur(7px); }
.camadd__dialog, .qadd__dialog {
position: relative; z-index: 1; width: min(680px, 100%);
max-height: calc(90vh * var(--vu)); overflow: auto;
padding: 20px 22px 18px; background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-pop);
animation: camadd-in .18s var(--ease);
}
@keyframes camadd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.camadd__head, .qadd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.camadd__eyebrow, .qadd__eyebrow { color: var(--color-muted); font-size: 12.5px; font-weight: 700; }
.camadd__title, .qadd__title { margin-top: 2px; font-size: 18px; font-weight: 850; }
.camadd__note, .qadd__note { margin-top: 12px; }
.camadd__done, .qadd__done {
display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
padding: 9px 12px; border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-success) 38%, var(--color-border));
color: var(--color-text); font-size: 12.5px; font-weight: 650; line-height: 1.4;
}
.camadd__done-mark, .qadd__done-mark { color: var(--color-success); font-weight: 900; }
.qadd__creds, .qadd__hint { display: block; margin-top: 4px; }
.qadd__creds code {
padding: 1px 6px; border-radius: var(--radius-sm);
background: var(--color-surface-soft); border: 1px solid var(--color-border);
font-weight: 800; user-select: all;
}
.qadd__hint { color: var(--color-muted); font-weight: 600; }
.camadd__grid, .qadd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.camadd__grid--more, .qadd__grid--more { margin-top: 12px; }
.camadd__cell--full, .qadd__cell--full { grid-column: 1 / -1; }
.camadd__grid .form-field, .qadd__grid .form-field { min-width: 0; }
.camadd__presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.camadd__presets-label { color: var(--color-muted); font-size: 12px; font-weight: 650; }
.camadd__preset {
padding: 3px 10px; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-surface-soft);
color: var(--color-muted); font-size: 12px; font-weight: 700; cursor: pointer;
transition: color .14s var(--ease), border-color .14s var(--ease);
}
.camadd__preset:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }
.camadd__more, .qadd__more { margin-top: 16px; border-top: 1px solid var(--color-border); padding-top: 12px; }
.camadd__more-summary, .qadd__more-summary { cursor: pointer; font-size: 13px; font-weight: 750; }
.camadd__foot, .qadd__foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--color-border);
flex-wrap: wrap;
}
.camadd__policy { color: var(--color-muted); font-size: 12px; line-height: 1.35; max-width: 46ch; }
.camadd__actions, .qadd__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.qadd__full { min-width: 0; white-space: normal; text-align: left; line-height: 1.3; }
.uadd-pw { display: none; }
.uadd-pw.is-open { display: grid; gap: 12px; margin-top: 12px; }
.uadd-creds__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 620px) {
.camadd, .qadd { padding: 10px; }
.camadd__dialog, .qadd__dialog { padding: 14px; max-height: calc(94vh * var(--vu)); }
.camadd__grid, .qadd__grid { grid-template-columns: 1fr; }
.camadd__actions, .qadd__actions { width: 100%; }
.camadd__actions .btn, .qadd__actions .btn { flex: 1 1 auto; }
}
.row-just-added > td {
box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--color-success) 13%, transparent);
animation: row-just-added-fade 4s var(--ease) forwards;
}
@keyframes row-just-added-fade {
0%, 55% { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--color-success) 13%, transparent); }
100% { box-shadow: inset 0 0 0 999px transparent; }
}
@media (prefers-reduced-motion: reduce) {
.row-just-added > td { animation: none; }
}
.camera-card__frame {
position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
object-fit: cover; background: var(--color-bg-deep);
}
.camera-card__frame[hidden] { display: none; }
.camera-card__frame--in { animation: camera-frame-in .45s ease; }
@keyframes camera-frame-in { from { opacity: 0; } to { opacity: 1; } }
.camera-card__frame:not([hidden]) ~ .camera-card__icon { opacity: 0; }
.camera-card--net .camera-card__media { aspect-ratio: 16 / 9; min-height: 0; }
.camera-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.camera-card__foot .camera-card__title { font-size: 14.5px; }
.camera-card__foot .camera-card__actions { flex: 0 0 auto; }
.camera-card__foot .btn-sm svg { width: 15px; height: 15px; }
.cam-open-pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 12px; border-radius: var(--radius-pill);
border: 1.5px solid currentColor;
font-size: 12px; font-weight: 850; letter-spacing: .02em;
}
.cam-open-pill::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.cam-open-pill--opened {
color: var(--color-success);
background: color-mix(in srgb, var(--color-success) 12%, transparent);
}
.cam-open-pill--late {
color: var(--color-warning);
background: color-mix(in srgb, var(--color-warning) 13%, transparent);
}
.cam-open-pill--unopened {
color: var(--color-danger);
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}
.cam-open-pill--unopened::before {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 55%, transparent);
animation: live-pulse 1.45s infinite;
}
.mode-option {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px; margin-top: 10px;
border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface); cursor: pointer;
transition: border-color .18s ease, background .18s ease;
}
.mode-option:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.mode-option.is-active {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
.mode-option input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--color-primary); }
.mode-option__body { display: flex; flex-direction: column; gap: 5px; }
.mode-option__title {
display: flex; align-items: center; gap: 8px;
font-weight: 750; font-size: 14.5px; color: var(--color-text);
}
.mode-option__desc { font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.open-switch { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.open-switch__btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 4px 13px 4px 5px; border-radius: var(--radius-pill);
border: 1.5px solid currentColor; background: color-mix(in srgb, var(--color-danger) 12%, transparent);
color: var(--color-danger);
font: inherit; font-size: 12px; font-weight: 850; letter-spacing: .02em;
cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.open-switch__btn:hover { background: color-mix(in srgb, var(--color-danger) 20%, transparent); }
.open-switch__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.open-switch.is-on .open-switch__btn {
color: var(--color-success);
background: color-mix(in srgb, var(--color-success) 12%, transparent);
}
.open-switch.is-on .open-switch__btn:hover {
background: color-mix(in srgb, var(--color-success) 20%, transparent);
}
.open-switch__track {
position: relative; flex: 0 0 auto; width: 30px; height: 18px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, currentColor 24%, transparent);
transition: background .18s ease;
}
.open-switch__knob {
position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
border-radius: 50%; background: currentColor;
transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
.open-switch.is-on .open-switch__knob { transform: translateX(12px); }
.open-switch:not(.is-on) .open-switch__knob {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 55%, transparent);
animation: live-pulse 1.45s infinite;
}
.open-switch__btn[disabled] { opacity: .55; cursor: progress; }
.open-switch__error {
font-size: 12px; font-weight: 650; color: var(--color-danger);
max-width: 320px; line-height: 1.35;
}
.open-all {
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
max-width: min(420px, 100%);
}
.open-all:empty { display: none; }
.open-switch--all .open-switch__btn {
padding: 6px 16px 6px 7px; font-size: 12.5px; min-height: var(--control-h-sm);
}
.open-switch__label { white-space: nowrap; }
.open-switch--all .open-switch__track { width: 34px; height: 20px; }
.open-switch--all .open-switch__knob { width: 14px; height: 14px; }
.open-switch--all.is-on .open-switch__knob { transform: translateX(14px); }
.open-all__count {
font-size: 12px; font-weight: 700; color: var(--color-muted); letter-spacing: .01em;
}
.open-all__note {
font-size: 12px; font-weight: 650; line-height: 1.35; text-align: right;
color: var(--color-muted);
}
.open-all__note--ok { color: var(--color-success); }
.open-all__note--warn { color: var(--color-warning); }
.open-all__note--error { color: var(--color-danger); }
.oexcept { position: relative; flex: 0 0 auto; }
.oexcept__trigger {
display: inline-flex; align-items: center; gap: 7px;
height: var(--control-h); padding: 0 13px;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface); color: var(--color-muted);
font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
cursor: pointer;
transition: border-color .16s var(--ease), color .16s var(--ease),
background .16s var(--ease), box-shadow .16s var(--ease);
}
.oexcept__trigger svg { width: 15px; height: 15px; flex: none; color: inherit; }
.oexcept__caret { width: 12px; height: 12px; margin-left: -1px; opacity: .8; transition: transform .18s var(--ease); }
.oexcept__trigger:hover { background: var(--color-surface-soft); color: var(--color-text); }
.oexcept__trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.oexcept.is-open .oexcept__trigger { border-color: var(--color-primary); color: var(--color-primary); }
.oexcept.is-open .oexcept__caret { transform: rotate(180deg); }
.oexcept.is-set .oexcept__trigger {
border-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
background: var(--color-warning-soft); color: var(--color-warning);
}
.oexcept__badge[hidden] { display: none; }
.oexcept__badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--radius-pill);
background: var(--color-warning); color: #fff;
font-size: 11.5px; font-weight: 800; line-height: 1;
}
.oexcept--sm .oexcept__trigger { height: var(--control-h-sm); padding: 0 12px; font-size: 12.5px; }
.oexcept__pop[hidden] { display: none; }
.oexcept__pop {
position: absolute; z-index: 60; top: calc(100% + 6px); right: 0;
width: min(400px, calc(100vw - 32px));
display: flex; flex-direction: column;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
overflow: hidden;
}
.oexcept__head { padding: 12px 14px 10px; border-bottom: 1px solid var(--color-border); }
.oexcept__headline { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.oexcept__title { display: block; font-size: 13.5px; font-weight: 800; color: var(--color-heading); }
.oexcept__close {
flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -3px -4px 0 0;
border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-faint);
cursor: pointer; transition: background-color .12s var(--ease), color .12s var(--ease);
}
.oexcept__close svg { width: 15px; height: 15px; }
.oexcept__close:hover { background: var(--color-surface-soft); color: var(--color-text); }
.oexcept__close:focus-visible { outline: none; box-shadow: var(--ring); }
.oexcept__hint { margin: 3px 0 9px; font-size: 12px; line-height: 1.4; color: var(--color-muted); }
.oexcept__tools { display: flex; flex-direction: column; gap: 8px; }
input.oexcept__search { min-height: var(--control-h-sm); height: auto; padding: 6px 10px; font-size: 13px; }
.oexcept__only {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 650; color: var(--color-muted); cursor: pointer; user-select: none;
}
.oexcept__only input { accent-color: var(--color-primary); }
.oexcept__list { max-height: min(320px, 46vh); overflow: auto; margin: 0; padding: 6px; list-style: none; }
.oexcept__list li[hidden] { display: none; }
.oexcept__row { display: flex; align-items: center; gap: 6px; }
.oexcept__item {
display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer;
transition: background .14s var(--ease);
}
.oexcept__item:hover { background: var(--color-surface-soft); }
.oexcept__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.oexcept__box {
position: relative; flex: none; width: 18px; height: 18px;
border: 1.5px solid var(--color-border); border-radius: 6px;
background: var(--color-surface); transition: all .16s var(--ease);
}
.oexcept__box::after {
content: ""; position: absolute; inset: 0; margin: auto;
width: 9px; height: 2px; border-radius: 1px; background: #fff;
transform: scaleX(0); transition: transform .16s var(--ease);
}
.oexcept__item input:checked + .oexcept__box {
background: var(--color-warning); border-color: var(--color-warning);
}
.oexcept__item input:checked + .oexcept__box::after { transform: scaleX(1); }
.oexcept__item input:focus-visible + .oexcept__box { box-shadow: var(--ring); }
.oexcept__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.oexcept__code { font-size: 13px; font-weight: 700; color: var(--color-text); }
.oexcept__addr {
font-size: 11.5px; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oexcept__item:has(input:checked) .oexcept__code { text-decoration: line-through; }
.oexcept__item:has(input:checked) .oexcept__body { opacity: .55; }
.oexcept__state {
flex: none; font-size: 11px; font-weight: 750; letter-spacing: .01em;
padding: 2px 8px; border-radius: var(--radius-pill);
background: color-mix(in srgb, currentColor 13%, transparent);
}
.oexcept__state--on_time { color: var(--color-success); }
.oexcept__state--late { color: var(--color-warning); }
.oexcept__state--not_opened { color: var(--color-danger); }
.oexcept__empty { margin: 0; padding: 14px; font-size: 12.5px; color: var(--color-muted); text-align: center; }
.oexcept__time { display: none; }
.oexcept__row:has([data-oexcept-check]:checked) .oexcept__time {
display: inline-flex; align-items: center; gap: 5px; flex: none;
height: 28px; padding: 0 9px;
border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
border-radius: var(--radius-sm); background: var(--color-surface);
}
.oexcept__row:has([data-oexcept-check]:checked) .oexcept__state--not_opened { display: none; }
.oexcept__time:focus-within {
border-color: var(--color-warning); box-shadow: var(--ring-soft);
}
.oexcept__time-label { font-size: 11px; font-weight: 750; color: var(--color-muted); }
input[type="time"].oexcept__time-input {
width: auto; min-width: 56px; height: auto; min-height: 0; padding: 0;
border: 0; background: transparent; box-shadow: none; outline: none;
font-size: 12.5px; font-weight: 750; color: var(--color-text);
}
.oexcept__apply[hidden] { display: none; }
.oexcept__apply {
display: flex; flex-direction: column; gap: 8px;
padding: 11px 12px; border-top: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-warning) 8%, transparent);
}
.oexcept__apply-lead { font-size: 12px; font-weight: 700; color: var(--color-warning); }
.oexcept__apply-row { display: flex; align-items: center; gap: 8px; }
.oexcept__apply-row .open-bar__field { flex: 0 0 auto; background: var(--color-surface); }
.oexcept__apply-row .btn { flex: 1 1 auto; }
.oexcept__apply-row .btn[disabled] { opacity: .5; cursor: default; }
.oexcept__apply-note { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--color-muted); }
.oexcept__apply-note b { color: var(--color-warning); font-weight: 800; }
.oexcept__apply-note[hidden] { display: none; }
.oexcept__foot {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-top: 1px solid var(--color-border);
background: var(--color-surface-alt);
}
.oexcept__sum { flex: 1 1 auto; text-align: right; font-size: 12px; font-weight: 700; color: var(--color-muted); }
[data-oexcept-note] { color: var(--color-warning); font-weight: 750; }
[data-oexcept-note][hidden] { display: none; }
[data-oexcept-blocked][hidden] { display: none; }
@media (max-width: 720px) {
.oexcept { width: 100%; }
.oexcept__trigger { width: 100%; justify-content: center; }
.oexcept__pop { left: 0; right: 0; width: auto; }
.oexcept__list { max-height: 38vh; }
.oexcept__foot { flex-wrap: wrap; }
.oexcept__sum { order: -1; flex: 1 0 100%; text-align: left; }
.oexcept .oexcept__foot .btn { flex: 0 0 auto; width: auto; min-width: 0; }
}
.open-all--tools { display: contents; }
.open-tools { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.open-tools__blocked[hidden] { display: none; }
.open-tools__blocked {
flex: 1 1 100%; margin-top: 2px;
font-size: 12px; font-weight: 650; color: var(--color-warning);
}
.open-bar__field {
display: inline-flex; align-items: center; gap: 9px; flex: none;
height: var(--control-h); padding: 0 13px;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface-soft);
transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.open-bar__field:focus-within { border-color: var(--color-primary); box-shadow: var(--ring-soft); }
.open-bar__field--sm { height: var(--control-h-sm); padding: 0 11px; gap: 7px; background: var(--color-surface); }
.open-bar__field--sm .open-bar__field-input { font-size: 13px; }
.open-bar__field-label {
font-size: 11.5px; font-weight: 700; color: var(--color-muted);
white-space: nowrap; letter-spacing: .01em;
}
input[type="time"].open-bar__field-input {
width: auto; min-width: 68px; height: auto; min-height: 0; padding: 0;
border: 0; background: transparent; box-shadow: none; outline: none;
font-size: 14px; font-weight: 700; color: var(--color-text);
}
.open-bar__field--warn { border-color: color-mix(in srgb, var(--color-warning) 60%, transparent); }
.open-bar__pair { display: inline-flex; align-items: stretch; flex: none; }
.open-bar__pair .oexcept__trigger {
border-radius: var(--radius-pill) 0 0 var(--radius-pill);
border-right-width: 0; padding-left: 18px; padding-right: 14px;
}
.open-bar__pair > .btn { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; padding-right: 22px; }
.open-bar__pair > .btn-primary { box-shadow: inset 1px 0 0 var(--color-primary-dark); }
.open-bar__pair > .btn-ghost { border: 1px solid var(--color-border); border-left: 0; }
.open-bar__default-submit {
position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 720px) {
.open-tools { flex-wrap: wrap; width: 100%; }
.open-bar__field { width: 100%; }
.open-bar__field-input { flex: 1 1 auto; }
.open-bar__pair { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.open-bar__pair .oexcept__trigger { border-radius: var(--radius-pill); border-right-width: 1px; }
.open-bar__pair > .btn { border-radius: var(--radius-pill); border-left: 0; box-shadow: none; width: 100%; }
.open-switch--all { flex-wrap: wrap; width: 100%; gap: 8px; }
.open-switch--all > .open-bar__field,
.open-switch--all .oexcept,
.open-switch--all .oexcept__trigger,
.open-switch--all .open-switch__btn { width: 100%; }
.open-switch--all .oexcept__trigger,
.open-switch--all .open-switch__btn { justify-content: center; }
}
@media (max-width: 720px) {
.camrow { padding: 12px; }
.camrow__count { display: none; }
.camrow__cameras .camera-card--net { max-width: none; }
.open-switch__error { max-width: none; }
.open-all { align-items: flex-start; max-width: none; }
.open-all__note { text-align: left; }
}
.schedule-editor {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
gap: 8px;
}
.schedule-editor__row {
display: flex; align-items: center; gap: 12px; padding: 7px 12px; min-height: 46px;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface-soft);
transition: border-color .16s var(--ease), background .16s var(--ease);
}
.schedule-editor__row.is-open {
border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
background: var(--color-primary-soft, rgba(0, 91, 255, .09));
}
.schedule-editor__day {
display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
font-size: 13.5px; font-weight: 650; cursor: pointer;
white-space: nowrap;
}
.schedule-editor__day input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--color-primary); }
.schedule-editor__times { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.schedule-editor__times[hidden] { display: none; }
.schedule-editor__times .input {
width: 92px; padding: 5px 8px; min-height: var(--control-h-sm); font-size: 13px;
}
.schedule-editor__dash { color: var(--color-muted); }
.schedule-editor__closed { color: var(--color-muted); font-size: 13px; flex: 0 0 auto; }
.schedule-editor__closed[hidden] { display: none; }
.schedule-editor__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.schedule-editor__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.field-static {
margin: 0; display: flex; align-items: center; min-height: var(--control-h);
padding: 8px 13px; border-radius: var(--radius-md);
border: 1px dashed var(--color-border-strong, var(--color-border));
background: var(--color-surface-soft); color: var(--color-text);
font-size: 14px; font-weight: 700; letter-spacing: .01em; overflow-wrap: anywhere;
}
.form-empty {
margin: 0; padding: 16px; text-align: center;
border: 1px dashed var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface-soft); color: var(--color-muted); font-size: 13px;
}
.form-empty[hidden] { display: none; }
.contacts-editor { display: flex; flex-direction: column; gap: 10px; }
.contacts-editor:empty { display: none; }
.contacts-editor__row {
display: flex; align-items: flex-end; gap: 12px;
padding: 12px 14px;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface-soft);
}
.contacts-editor__field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 0; min-width: 0; }
.contacts-editor__field:last-of-type { flex: 0 0 210px; }
.contacts-editor__caption { font-size: 12px; font-weight: 600; color: var(--color-muted); }
.contacts-editor__field .input { width: 100%; }
.contacts-editor__remove { flex: 0 0 auto; }
@media (max-width: 720px) {
.contacts-editor__row { flex-direction: column; align-items: stretch; }
.contacts-editor__field:last-of-type { flex: 1 1 auto; }
.contacts-editor__remove { align-self: flex-end; }
}
.pvz-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pvz-contacts__item {
display: flex; align-items: center; gap: 12px;
padding: 11px 0; border-bottom: 1px solid var(--color-border);
}
.pvz-contacts__item:last-child { border-bottom: 0; }
.pvz-contacts__icon {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: var(--color-primary-soft, rgba(0,91,255,.09));
color: var(--color-primary);
}
.pvz-contacts__icon svg { width: 16px; height: 16px; }
.pvz-contacts__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pvz-contacts__label {
font-size: 13.5px; font-weight: 650; color: var(--color-text);
overflow-wrap: anywhere;
}
.pvz-contacts__phone {
font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .01em;
color: var(--color-text); text-decoration: none;
}
a.pvz-contacts__phone { color: var(--color-primary); }
a.pvz-contacts__phone:hover { text-decoration: underline; }
.address-autocomplete { position: relative; display: block; }
.address-autocomplete .input { width: 100%; }
.address-suggest {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
display: flex; flex-direction: column; padding: 6px; max-height: 260px; overflow-y: auto;
border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
background: var(--color-surface); box-shadow: var(--shadow-pop);
}
.address-suggest[hidden] { display: none; }
.address-suggest__item {
display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: 8px;
background: transparent; color: var(--color-text); text-align: left;
font: inherit; font-size: 13.5px; line-height: 1.4; cursor: pointer;
}
.address-suggest__item:hover,
.address-suggest__item.is-active { background: var(--color-primary-soft, rgba(0,91,255,.09)); }
.pvz-form .form-field--full { min-width: 0; }
.map-picker {
height: 320px; width: 100%; min-width: 0;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
overflow: hidden; background: var(--color-surface-soft);
position: relative; z-index: 0;
}
[data-theme="dark"] .map-picker [class*="ground-pane"] { filter: brightness(.82) contrast(1.04) saturate(.9); }
.map-picker--unavailable {
display: grid; place-items: center; padding: 20px;
color: var(--color-muted); font-size: 13px; text-align: center;
}
.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 819px) {
.form-grid--three { grid-template-columns: 1fr; }
}
.guide-modal[hidden] { display: none; }
.guide-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.guide-modal__backdrop { position: absolute; inset: 0; background: rgba(7,17,31,.72); backdrop-filter: blur(9px); }
.guide-modal__dialog {
position: relative; z-index: 1; width: min(560px, 100%); max-height: min(calc(86vh * var(--vu)), 640px);
overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 20px;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-pop);
}
.guide-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.guide-modal__title { font-size: 18px; font-weight: 850; }
.guide-modal__steps {
margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px;
font-size: 14px; line-height: 1.5;
}
.guide-modal__note { color: var(--color-muted); font-size: 12.5px; line-height: 1.5; }
.guide-modal-open { overflow: hidden; }
@media (max-width: 640px) {
.guide-modal { padding: 10px; }
.guide-modal__dialog { max-height: calc(94vh * var(--vu)); padding: 14px; }
}
.camera-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.camera-mini-list__row {
display: flex; align-items: center; gap: 10px; padding: 9px 2px; min-height: 46px;
}
.camera-mini-list__row + .camera-mini-list__row { border-top: 1px solid var(--color-border); }
.camera-mini-list__name { font-weight: 650; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.camera-mini-list__edit { margin-left: auto; }
.role-check-grid ul {
list-style: none; margin: 0; padding: 0; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.role-check-grid label {
display: flex; align-items: center; gap: 8px; min-height: 38px;
padding: 8px 10px; border: 1px solid var(--color-border);
border-radius: var(--radius-md); background: var(--color-surface-soft);
}
@keyframes live-pulse {
70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (max-width: 944px) {
.camera-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.camera-grid,
.role-check-grid ul { grid-template-columns: 1fr; }
.camera-card__actions .btn,
.camera-card__admin .btn,
.camera-card__admin form { width: 100%; }
.camera-card__admin .btn,
.camera-card__actions .btn { justify-content: center; }
.camera-card--net .camera-card__foot { flex-wrap: wrap; }
.camera-card--net .camera-card__title { flex: 1 1 100%; }
.camera-card--net .camera-card__actions { flex: 1 1 100%; flex-wrap: nowrap; }
.camera-card--net .camera-card__actions .btn { width: auto; flex: 1 1 auto; }
.camera-card--net .camera-card__actions .btn-secondary { flex: 0 0 auto; }
.camera-modal { padding: 10px; }
.camera-modal__dialog { max-height: calc(94vh * var(--vu)); padding: 12px; }
.camera-player { min-height: 300px; }
.schedule-editor__row { flex-wrap: wrap; row-gap: 8px; }
.schedule-editor__day { flex: 1 0 100%; }
.schedule-editor__times .input { width: 96px; }
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 18px;
}
.report-card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
padding: 20px;
min-height: 148px;
text-decoration: none;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
border-color 0.18s var(--ease);
}
.report-card:hover,
.lift-hover:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-pop);
border-color: var(--color-primary);
}
.report-card__title {
margin: 0 0 6px;
font-size: 1.05rem;
font-weight: 700;
}
.report-card__desc {
margin: 0;
color: var(--color-muted);
font-size: 0.9rem;
line-height: 1.4;
}
.report-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.report-card__cta {
color: var(--color-primary-dark);
font-weight: 600;
font-size: 0.9rem;
}
.report-notice {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px 16px;
margin-bottom: 16px; padding: 12px 16px;
border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
border-left-width: 3px; border-radius: var(--radius-md);
background: var(--color-warning-soft); color: var(--color-warning);
font-size: 13px; line-height: 1.5;
}
.report-notice--info {
border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.report-notice__text { flex: 1 1 320px; min-width: 0; }
.report-notice .btn {
flex: none;
background: var(--color-surface);
border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border));
color: var(--color-warning);
}
.report-notice .btn:hover { background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface)); }
.report-notice--info .btn {
border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
color: var(--color-primary-dark);
}
.report-notice--info .btn:hover { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }
.reports-cut { margin: 0 0 18px; }
.rep-groups { display: flex; flex-direction: column; gap: 34px; }
.rep-group { --rep-accent: var(--color-primary); --rep-accent-soft: var(--color-primary-soft); }
.rep-group[data-accent="money"] { --rep-accent: var(--color-warning); --rep-accent-soft: var(--color-warning-soft); }
.rep-group[data-accent="people"] { --rep-accent: var(--color-violet); --rep-accent-soft: var(--color-violet-soft); }
.rep-group[data-accent="network"] { --rep-accent: var(--color-success); --rep-accent-soft: var(--color-success-soft); }
.rep-group__head {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.rep-group__mark {
display: grid;
place-items: center;
flex: none;
width: 26px;
height: 26px;
color: var(--rep-accent);
}
.rep-group__mark svg { width: 24px; height: 24px; }
.rep-group__text { min-width: 0; flex: 1 1 auto; }
.rep-group__title {
margin: 0;
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-heading);
}
.rep-group__hint { margin: 2px 0 0; font-size: 0.82rem; color: var(--color-muted); }
.rep-group__count {
flex: none;
min-width: 24px;
padding: 3px 9px;
border-radius: 999px;
background: var(--color-surface-soft);
color: var(--color-faint);
font-size: 0.78rem;
font-weight: 700;
text-align: center;
}
.rep-group__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
gap: 14px;
}
.rep-card { gap: 12px; padding: 18px; min-height: 0; justify-content: flex-start; }
.rep-card__icon {
display: grid;
place-items: center;
justify-self: start;
width: 26px;
height: 26px;
color: var(--rep-accent);
transition: transform 0.18s var(--ease);
}
.rep-card__icon svg { width: 25px; height: 25px; }
.rep-card .report-card__body { gap: 0; }
.rep-card .report-card__title { font-size: 1rem; margin-bottom: 5px; }
.rep-card .report-card__desc { font-size: 0.86rem; }
.rep-card .report-card__foot { margin-top: auto; padding-top: 2px; }
.rep-card .report-card__cta { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.rep-card__arrow { transition: transform 0.18s var(--ease); }
.rep-card:hover { border-color: var(--rep-accent); }
.rep-card:hover .rep-card__icon { transform: translateY(-2px); }
.rep-card:hover .rep-card__arrow { transform: translateX(3px); }
.rep-group[data-accent="main"] .rep-group__grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.rep-group[data-accent="main"] .rep-card {
flex-direction: row;
align-items: center;
gap: 16px;
padding: 20px;
}
.rep-group[data-accent="main"] .rep-card__icon { width: 32px; height: 32px; }
.rep-group[data-accent="main"] .rep-card__icon svg { width: 30px; height: 30px; }
.rep-group[data-accent="main"] .report-card__body { flex: 1 1 auto; }
.rep-group[data-accent="main"] .report-card__foot { margin: 0; padding: 0; flex: none; }
@media (max-width: 720px) {
.rep-group[data-accent="main"] .rep-card { flex-direction: column; align-items: stretch; }
.rep-group[data-accent="main"] .report-card__foot { margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) {
.rep-card:hover { transform: none; }
.rep-card__arrow { transition: none; }
}
.filter-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 150px;
}
.filter-field__label {
font-size: 0.74rem;
font-weight: 600;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.filter-field__error {
color: var(--color-danger);
font-size: 0.74rem;
}
.filter-field--actions {
flex-direction: row;
align-items: flex-end;
gap: 8px;
}
.filter-checks {
display: flex; align-items: center; flex-wrap: wrap;
gap: 6px 18px; min-height: var(--control-h); min-width: 0;
}
.filter-checks:empty { display: none; }
.page__hint {
margin: 6px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--color-muted);
max-width: 74ch;
}
.filter-check {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; white-space: nowrap;
}
.filter-check__input { width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
.filter-check__label { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.filter-check:hover .filter-check__label { color: var(--color-primary-dark); }
.filters-bar .filter-field--actions { grid-column: 1 / -1; justify-content: flex-end; }
.filters-bar {
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
margin-top: 18px;
}
.breadcrumbs {
font-size: 0.82rem;
color: var(--color-muted);
margin-bottom: 4px;
}
.breadcrumbs a {
color: var(--color-primary-dark);
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.table-note {
margin: 12px 4px 0;
color: var(--color-muted);
font-size: 0.82rem;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 0 0 12px;
}
.detail-grid dt {
font-size: 0.74rem;
font-weight: 600;
color: var(--color-muted);
text-transform: uppercase;
}
.detail-grid dd {
margin: 2px 0 0;
font-weight: 600;
overflow-wrap: anywhere;
}
.badge-muted { background: var(--color-surface-soft); color: var(--color-muted); }
.badge-outline { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }
.ta-center { text-align: center; }
.cell-hint { display: block; font-size: 10.5px; margin-top: 2px; }
.field--check { flex-direction: row; align-items: center; gap: 9px; }
.status-badge--unread { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.status-badge--read { background: var(--color-surface-soft); color: var(--color-muted); }
.status-badge--archived { background: var(--color-surface-soft); color: var(--color-muted); opacity: .8; }
.filters { display: flex; flex-direction: column; gap: 12px; }
.filters__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.filters__actions { display: flex; gap: 10px; }
.notif-list { display: flex; flex-direction: column; gap: 10px; }
.notif-bulk {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 10px 14px; margin-bottom: 10px;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface-alt);
}
.notif-bulk__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.notif-bulk__select { width: auto; padding-top: 8px; padding-bottom: 8px; }
.bulk-bar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 10px 14px; margin-bottom: 10px;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface-alt);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.bulk-bar__actions .btn { min-height: var(--control-h); }
.bulk-bar__comment { width: auto; min-width: 220px; padding-top: 8px; padding-bottom: 8px; }
.bulk-bar__field { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bulk-bar__date { width: auto; min-width: 156px; }
.bulk-bar__city { width: auto; min-width: 168px; padding-top: 8px; padding-bottom: 8px; }
.city-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.city-row__input { flex: 1 1 200px; width: auto; min-width: 0; max-width: 250px; }
.city-row__saved { font-size: 12px; font-weight: 600; color: var(--color-success); }
.city-row + .cell-sub { margin-top: 6px; }
.bulk-bar__warn { color: var(--color-danger); font-size: 13px; font-weight: 600; }
.bulk-bar__warn[hidden] { display: none; }
.kpi-check-col { width: 36px; }
.kpi-check-col input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.scope-pick__bar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 14px; margin-bottom: 12px;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface-alt);
}
.scope-pick__bulk { display: flex; align-items: center; gap: 8px; }
.scope-pick__search { flex: 1 1 220px; min-width: 180px; }
.scope-pick__search .input { width: 100%; }
.scope-pick__count { font-size: 13px; font-weight: 600; color: var(--color-muted); margin-left: auto; }
.scope-pick__grid {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.scope-pick__empty { margin: 12px 2px; color: var(--color-muted); font-size: 13px; }
.scope-pick__empty[hidden] { display: none; }
.scope-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; min-width: 0;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface);
transition: border-color .14s var(--ease), background .14s var(--ease);
}
.scope-item:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.scope-item.is-on { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.scope-item[hidden] { display: none; }
.scope-item__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.scope-item__code { font-size: 13px; font-weight: 600; color: var(--color-text); }
.scope-item__addr {
font-size: 12px; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scope-item .badge { margin-left: auto; flex: none; }
.scope-pick .form-actions { margin-top: 18px; }
.caps-group + .caps-group { margin-top: 20px; }
.caps-group__title {
margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--color-muted);
}
.caps-list { display: grid; gap: 8px; }
.caps-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px; min-width: 0;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface);
transition: border-color .14s var(--ease), background .14s var(--ease);
}
.caps-item:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.caps-item.is-on { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.caps-item .checkbox__box { margin-top: 2px; flex: none; }
.caps-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.caps-item__label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.caps-item__hint { font-size: 12.5px; line-height: 1.45; color: var(--color-muted); }
.access-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.access-list li { font-size: 13px; line-height: 1.45; }
.notif-item {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface); box-shadow: var(--shadow-card);
transition: transform .16s var(--ease), box-shadow .16s var(--ease);
cursor: pointer;
}
.notif-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.notif-item__check { display: inline-flex; align-items: center; margin-top: 2px; cursor: pointer; }
.notif-item__check input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.notif-item__dot {
flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%;
background: var(--color-border);
}
.notif-item--unread { border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border)); }
.notif-item--unread .notif-item__dot { background: var(--color-primary); }
.notif-item--unread .notif-item__title { font-weight: 800; }
.notif-item--danger.notif-item--unread .notif-item__dot,
.notif-item--critical.notif-item--unread .notif-item__dot { background: var(--color-danger); }
.notif-item--warning.notif-item--unread .notif-item__dot { background: var(--color-warning); }
.notif-item--success.notif-item--unread .notif-item__dot { background: var(--color-success); }
.notif-item--urgent .notif-item__dot { animation: pulse-soft 2.2s ease-in-out infinite; }
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-item__title { font-size: 14.5px; font-weight: 650; color: var(--color-text); }
.notif-item__title:hover { color: var(--color-primary-dark); }
.notif-item__message { margin: 5px 0 0; color: var(--color-muted); font-size: 13.5px; line-height: 1.5; }
.notif-item__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; color: var(--color-muted); }
.notif-item__action { color: var(--color-primary-dark); font-weight: 650; }
.notif-item__new {
flex: 0 0 auto; align-self: flex-start; margin-top: 6px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.notif-item__controls { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.notif-item__controls .inline-form,
.inline-form { display: inline; }
.topbar__bell-wrap { position: relative; }
.topbar__notif-dropdown {
width: min(380px, calc(92vw * var(--vu))); padding: 0;
overflow: hidden; border-radius: var(--radius-xl);
}
.notif-drop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 15px 11px; }
.notif-drop__head form { margin: 0; }
.notif-drop__head-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--color-heading); }
.topbar__notif-dropdown .notif-drop__read-all {
width: auto; min-height: 0; padding: 2px 0; border-radius: 0;
color: var(--color-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.topbar__notif-dropdown .notif-drop__read-all:hover { background: transparent; color: var(--color-primary-dark); text-decoration: underline; }
.notif-drop__tabs { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; padding: 0 15px; border-bottom: 1px solid var(--color-border); }
.notif-drop__tabs-group { display: flex; align-items: stretch; gap: 18px; }
.notif-drop__tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 0 10px; cursor: pointer; }
.notif-drop__filter { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; appearance: none; cursor: pointer; }
.notif-drop__tab-text { font-size: 13px; font-weight: 650; color: var(--color-muted); }
.notif-drop__tab:hover .notif-drop__tab-text { color: var(--color-text); }
.notif-drop__tab:has(.notif-drop__filter:checked) .notif-drop__tab-text { color: var(--color-heading); font-weight: 750; }
.notif-drop__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.notif-drop__tab:has(.notif-drop__filter:checked)::after { background: var(--color-heading); }
.notif-drop__filter:focus-visible ~ .notif-drop__tab-text { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 3px; }
.notif-drop__tab-count {
min-width: 18px; padding: 0 6px; border-radius: var(--radius-pill);
background: var(--color-heading); color: var(--color-surface);
font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
}
.topbar__notif-dropdown .notif-drop__gear {
width: 28px; height: 28px; min-height: 0; padding: 0; margin: 1px 0 6px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm); color: var(--color-faint);
}
.topbar__notif-dropdown .notif-drop__gear:hover { background: var(--color-surface-soft); color: var(--color-text); }
.notif-drop__gear svg { width: 16px; height: 16px; }
.notif-drop__list {
display: flex; flex-direction: column;
max-height: min(400px, calc(56vh * var(--vu)));
overflow-y: auto; overscroll-behavior: contain;
}
.notif-drop__group {
position: sticky; top: 0; z-index: 1; flex: 0 0 auto;
padding: 11px 15px 5px; background: var(--color-surface);
font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
color: var(--color-faint);
}
.notif-drop__group--new { color: var(--color-primary-dark); }
.notif-drop__list .notif-drop__item {
display: flex; gap: 12px; align-items: flex-start;
padding: 11px 15px; border-radius: 0;
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
background: var(--color-surface);
flex: 0 0 auto;
}
.notif-drop__list .notif-drop__item:last-child { border-bottom: 0; }
.notif-drop__list .notif-drop__item:hover { background: var(--color-surface-soft); color: var(--color-text); }
.notif-drop__list .notif-drop__item--unread { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); }
.notif-drop__list .notif-drop__item--unread:hover { background: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface)); }
.notif-drop__list .notif-drop__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; box-shadow: none; }
.notif-drop__icon {
flex: 0 0 auto; width: 26px; height: 26px;
display: grid; place-items: center;
color: var(--color-muted);
}
.notif-drop__icon svg { width: 22px; height: 22px; }
.notif-drop__icon--info { color: var(--color-primary-dark); }
.notif-drop__icon--success { color: var(--color-success); }
.notif-drop__icon--warning { color: var(--color-warning); }
.notif-drop__icon--danger,
.notif-drop__icon--critical { color: var(--color-danger); }
.notif-drop__sev { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.notif-drop__sev--info { background: var(--color-primary); }
.notif-drop__sev--success { background: var(--color-success); }
.notif-drop__sev--warning { background: var(--color-warning); }
.notif-drop__sev--danger, .notif-drop__sev--critical { background: var(--color-danger); }
.notif-drop__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.notif-drop__title {
font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--color-text);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.notif-drop__item--unread .notif-drop__title { font-weight: 750; color: var(--color-heading); }
.notif-drop__item--read .notif-drop__title { font-weight: 550; color: var(--color-muted); }
.notif-drop__meta { display: flex; align-items: baseline; min-width: 0; font-size: 11.5px; }
.notif-drop__time { flex: 0 0 auto; color: var(--color-muted); }
.notif-drop__item--unread .notif-drop__time { color: var(--color-text); font-weight: 650; }
.notif-drop__source { min-width: 0; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-drop__time + .notif-drop__source::before { content: "·"; margin: 0 5px; color: var(--color-muted); }
.notif-drop__new {
flex: 0 0 auto; align-self: center; width: 8px; height: 8px; border-radius: 50%;
background: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.notif-drop__empty { padding: 30px 16px; text-align: center; color: var(--color-muted); font-size: 13px; }
.notif-drop__empty--new { display: none; }
.notif-drop__foot { border-top: 1px solid var(--color-border); }
.topbar__notif-dropdown .notif-drop__foot a {
display: flex; align-items: center; justify-content: center; gap: 3px;
min-height: 0; padding: 11px 15px; border-radius: 0;
color: var(--color-muted); font-size: 12.5px; font-weight: 650;
}
.topbar__notif-dropdown .notif-drop__foot a:hover { background: var(--color-surface-soft); color: var(--color-primary-dark); }
.topbar__notif-dropdown .notif-drop__foot a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; box-shadow: none; }
.notif-drop__foot svg { width: 14px; height: 14px; }
.notif-drop__tabs:has(.notif-drop__filter--new:checked) ~ .notif-drop__list .notif-drop__item--read,
.notif-drop__tabs:has(.notif-drop__filter--new:checked) ~ .notif-drop__list .notif-drop__group { display: none; }
.notif-drop__tabs:has(.notif-drop__filter--new:checked) ~ .notif-drop__list .notif-drop__empty:not(.notif-drop__empty--new) { display: none; }
.notif-drop__tabs:has(.notif-drop__filter--new:checked) ~ .notif-drop__list .notif-drop__empty--new { display: block; }
.notif-drop__tabs:has(.notif-drop__filter--new:checked) ~ .notif-drop__list .notif-drop__item--unread:has(+ .notif-drop__group) { border-bottom: 0; }
@media (max-width: 640px) {
.notif-item { flex-wrap: wrap; }
.notif-item__controls { flex-direction: row; width: 100%; }
}
.dash-filters {
padding: 12px 14px; border-radius: var(--radius-lg);
background: var(--color-surface-alt); box-shadow: var(--shadow-xs);
}
.dash-filters[hidden] { display: none; }
.dash-filters__row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.dash-filters .filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dash-filters .filter-field__label { font-size: 10.5px; color: var(--color-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.dash-filters .input { min-width: 140px; height: 40px; }
.dash-filters .filter-field--actions { margin-left: auto; }
.dash-period,
.dcat__open,
.lswitch__toggle {
gap: 8px; cursor: pointer; border: 1px solid transparent; font: inherit; line-height: 1;
transition: background-color .18s var(--ease), border-color .18s var(--ease),
box-shadow .18s var(--ease), transform .12s var(--ease);
}
.dash-period b,
.dcat__open b,
.lswitch__toggle b { color: var(--color-text); }
.dash-period svg,
.dcat__open svg,
.lswitch__toggle svg { flex: none; }
.dash-period__icon { color: var(--color-primary); flex: none; }
.dash-period__caret { color: var(--color-faint); flex: none; margin-left: 1px; transition: transform .2s var(--ease); }
.dash-period:hover,
.dcat__open:hover,
.lswitch__toggle:hover { background: var(--color-surface); border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }
.dash-period:hover svg:first-child,
.dcat__open:hover svg:first-child,
.lswitch__toggle:hover svg:first-child { color: var(--color-primary); }
.dash-period:focus-visible,
.dcat__open:focus-visible,
.lswitch__toggle:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.dash-period[aria-expanded="true"],
.dcat__open[aria-expanded="true"],
.lswitch__toggle[aria-expanded="true"] {
background: var(--color-surface); border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.dash-period[aria-expanded="true"] .dash-period__caret,
.lswitch__toggle[aria-expanded="true"] .dash-period__caret { transform: rotate(180deg); color: var(--color-primary); }
.dcat__open[aria-expanded="true"] svg:first-child,
.lswitch__toggle[aria-expanded="true"] svg:first-child { color: var(--color-primary); }
.dash-period:active,
.dcat__open:active,
.lswitch__toggle:active { transform: translateY(0.5px); }
.periodcal {
position: fixed; z-index: 80; display: flex; overflow: hidden;
border: 1px solid var(--color-border); border-radius: var(--radius-xl);
background: var(--color-surface); box-shadow: var(--shadow-pop);
opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top right;
transition: opacity .16s var(--ease-out), transform .16s var(--ease-out);
}
.periodcal.is-open { opacity: 1; transform: none; }
.periodcal[hidden] { display: none; }
.periodcal__main { display: flex; flex-direction: column; padding: 12px; width: 300px; max-width: 100%; }
.periodcal__nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.periodcal__month { font-weight: 800; font-size: 14px; color: var(--color-heading); letter-spacing: -0.01em; }
.periodcal__navbtn {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface); color: var(--color-muted); cursor: pointer;
transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.periodcal__navbtn:hover { background: var(--color-surface-soft); color: var(--color-primary-dark); border-color: var(--color-border-strong); }
.periodcal__week {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px;
}
.periodcal__week span {
text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--color-faint); padding: 4px 0;
}
.periodcal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.periodcal__day {
position: relative; display: grid; place-items: center; height: 36px;
border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--color-text); font-size: 13px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.periodcal__day.is-outside { color: var(--color-faint); font-weight: 500; opacity: .55; }
.periodcal__day.is-today {
background: var(--color-primary); color: var(--color-on-primary); font-weight: 800;
border-color: var(--color-primary);
}
.periodcal__day.is-mark {
background: var(--color-violet-soft);
border-color: color-mix(in srgb, var(--color-violet) 38%, transparent);
color: var(--color-violet); font-weight: 800;
}
.periodcal__day.is-mark::after {
content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px;
border-radius: 50%; background: currentColor; transform: translateX(-50%);
}
.periodcal__day.is-mark.is-outside { opacity: .5; }
.periodcal__day.is-mark.is-today { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.periodcal__day.is-mark-weekly {
background: transparent; color: var(--color-text);
border-color: color-mix(in srgb, var(--color-violet) 24%, transparent);
font-weight: 700;
}
.periodcal__day.is-mark-weekly::after { background: var(--color-violet); opacity: .75; }
.periodcal__legend {
display: grid; gap: 6px; margin-top: 12px; padding-top: 11px;
border-top: 1px solid var(--color-border);
}
.periodcal__legend-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.periodcal__legend-day {
flex: none; display: grid; place-items: center; width: 22px; height: 22px;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--color-violet) 38%, transparent);
background: var(--color-violet-soft);
font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
color: var(--color-violet);
}
.periodcal__legend-title {
font-size: 12px; font-weight: 600; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 560px) {
.periodcal { max-width: calc(calc(100vw * var(--vu)) - 24px); }
}
.dash-group { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.dash-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-group__title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--color-text); }
.opening-quick {
display: flex; flex-direction: column; gap: 12px;
padding: 18px; margin-bottom: 18px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-primary);
border-radius: 14px;
box-shadow: 0 10px 26px -20px rgba(0,0,0,.35);
}
.opening-quick--recorded { border-left-color: var(--color-success); }
.opening-quick--late { border-left-color: var(--color-warning); }
.opening-quick__eyebrow {
font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-primary);
}
.opening-quick--recorded .opening-quick__eyebrow { color: var(--color-success); }
.opening-quick--late .opening-quick__eyebrow { color: var(--color-warning); }
.opening-quick__title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--color-heading); margin-top: 2px; }
.opening-quick__meta { font-size: 13px; color: var(--color-muted); margin-top: 4px; }
.opening-quick__warn { display: block; margin-top: 4px; font-weight: 700; color: var(--color-warning); }
.opening-quick__form { display: flex; }
.opening-quick__btn {
width: 100%; min-height: 52px; font-size: 16px; font-weight: 800;
border-radius: 12px;
}
.opening-quick__hint { font-size: 12px; color: var(--color-faint); }
.opening-quick__hint a { color: var(--color-muted); }
@media (min-width: 720px) {
.opening-quick__form { max-width: 380px; }
}
.agent-cta {
display: grid; grid-template-columns: auto 1fr; gap: 12px 14px;
padding: 16px 18px; margin-bottom: 18px;
background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
border-left: 4px solid var(--color-warning);
border-radius: 14px;
box-shadow: 0 10px 26px -20px rgba(0,0,0,.35);
}
.agent-cta__icon {
align-self: start; margin-top: 2px;
flex: none; width: 38px; height: 38px; border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--color-warning) 18%, transparent);
color: var(--color-warning);
}
.agent-cta__icon svg { width: 20px; height: 20px; }
.agent-cta__eyebrow {
font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-warning);
}
.agent-cta__title {
font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
color: var(--color-heading); margin-top: 2px;
}
.agent-cta__text { font-size: 13px; color: var(--color-muted); margin-top: 6px; }
.agent-cta__btn { grid-column: 1 / -1; min-height: var(--control-h); font-weight: 750; }
@media (min-width: 720px) {
.agent-cta { grid-template-columns: auto 1fr auto; align-items: center; }
.agent-cta__btn { grid-column: auto; align-self: center; white-space: nowrap; }
}
.xchg-alert[hidden] { display: none; }
.xchg-alert { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.xchg-alert__backdrop {
position: absolute; inset: 0;
background: color-mix(in srgb, var(--color-bg-deep) 72%, transparent);
backdrop-filter: blur(6px);
}
.xchg-alert__dialog {
position: relative; width: min(460px, 100%);
display: grid; justify-items: center; text-align: center; gap: 6px;
padding: 30px 28px 24px;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
animation: xchg-alert-in .22s var(--ease) both;
}
@keyframes xchg-alert-in {
from { opacity: 0; transform: translateY(10px) scale(.97); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.xchg-alert__dialog { animation: none; }
}
.xchg-alert__x {
position: absolute; top: 12px; right: 12px;
width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 0; background: transparent; color: var(--color-muted); cursor: pointer;
}
.xchg-alert__x:hover { background: var(--color-surface-soft); color: var(--color-text); }
.xchg-alert__x svg { width: 18px; height: 18px; }
.xchg-alert__icon {
width: 56px; height: 56px; border-radius: 50%; margin-bottom: 6px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--color-primary) 16%, transparent);
color: var(--color-primary);
}
.xchg-alert__icon svg { width: 26px; height: 26px; }
.xchg-alert__eyebrow {
font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-primary);
}
.xchg-alert__title { font-size: 21px; font-weight: 850; letter-spacing: -0.015em; color: var(--color-heading); }
.xchg-alert__card {
width: 100%; display: grid; gap: 2px; margin-top: 12px; padding: 14px 16px;
border-radius: var(--radius-lg); border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 76%, var(--color-surface-soft));
}
.xchg-alert__day { font-size: 17px; font-weight: 800; color: var(--color-heading); }
.xchg-alert__time { font-size: 15px; font-weight: 750; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.xchg-alert__place { margin-top: 4px; font-size: 13px; color: var(--color-text); }
.xchg-alert__code { color: var(--color-muted); }
.xchg-alert__note { margin-top: 8px; font-size: 12.5px; color: var(--color-muted); }
.xchg-alert__text { margin-top: 12px; font-size: 13px; color: var(--color-muted); }
.xchg-alert__actions {
display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
width: 100%; margin-top: 18px;
}
@media (max-width: 520px) {
.xchg-alert { padding: 16px; }
.xchg-alert__actions { flex-direction: column-reverse; }
.xchg-alert__actions .btn { width: 100%; }
}
.xchg-cta {
display: grid; grid-template-columns: auto 1fr; gap: 12px 14px;
padding: 16px 18px; margin-bottom: 18px;
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
border-left: 4px solid var(--color-primary);
border-radius: 14px;
box-shadow: 0 10px 26px -20px rgba(0, 0, 0, .35);
}
.xchg-cta__icon {
align-self: start; margin-top: 2px;
flex: none; width: 38px; height: 38px; border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--color-primary) 18%, transparent);
color: var(--color-primary);
}
.xchg-cta__icon svg { width: 20px; height: 20px; }
.xchg-cta__eyebrow {
font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-primary);
}
.xchg-cta__title {
font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
color: var(--color-heading); margin-top: 2px;
}
.xchg-cta__text { font-size: 13px; color: var(--color-muted); margin-top: 6px; }
.xchg-cta__btn { grid-column: 1 / -1; min-height: var(--control-h); font-weight: 750; }
@media (min-width: 720px) {
.xchg-cta { grid-template-columns: auto 1fr auto; align-items: center; }
.xchg-cta__btn { grid-column: auto; align-self: center; white-space: nowrap; }
}
.mail-cta {
display: grid; grid-template-columns: auto 1fr; gap: 12px 14px;
padding: 16px 18px; margin-bottom: 18px;
background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
border-left: 4px solid var(--color-danger);
border-radius: 14px;
box-shadow: 0 10px 26px -20px rgba(0,0,0,.35);
}
.mail-cta__icon {
align-self: start; margin-top: 2px;
flex: none; width: 38px; height: 38px; border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--color-danger) 18%, transparent);
color: var(--color-danger);
}
.mail-cta__icon svg { width: 20px; height: 20px; }
.mail-cta__eyebrow {
font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-danger);
}
.mail-cta__title {
font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
color: var(--color-heading); margin-top: 2px;
}
.mail-cta__text { font-size: 13px; color: var(--color-muted); margin-top: 6px; }
.mail-cta__form {
grid-column: 1 / -1;
display: flex; gap: 8px; flex-wrap: wrap;
}
.mail-cta__input { flex: 1 1 220px; min-width: 0; }
.mail-cta__input--password { flex: 0 1 170px; }
.mail-cta__btn { min-height: var(--control-h); font-weight: 750; white-space: nowrap; }
@media (min-width: 860px) {
.mail-cta { grid-template-columns: auto 1fr auto; align-items: center; }
.mail-cta__form { grid-column: auto; align-self: center; flex-wrap: nowrap; }
.mail-cta__input { flex: 0 1 240px; }
}
.agent-state { display: flex; align-items: center; gap: 10px; }
.agent-state__dot {
flex: none; width: 9px; height: 9px; border-radius: 50%;
background: var(--color-muted);
}
.agent-state--on .agent-state__dot { background: var(--color-success); }
.agent-state--off .agent-state__dot { background: color-mix(in srgb, var(--color-muted) 60%, transparent); }
.agent-state__text { font-weight: 650; }
.agent-state__sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--color-muted); }
.dash-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.dash-metric { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.dash-metric:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(0,0,0,.4); }
.dash-metric--critical { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger) inset; }
.dash-metric--critical .metric-card__value { color: var(--color-danger); }
.dash-widget { display: flex; flex-direction: column; gap: 12px; }
.dash-widget--critical { border-color: var(--color-danger); }
.dash-widget.row-link:hover { border-color: var(--color-primary); box-shadow: var(--shadow-soft); }
.dash-widget.row-link:hover .card__head-side .btn { color: var(--color-primary); }
.dsec .metric-card:has(.metric-card__overlay):hover {
border-color: var(--color-primary); box-shadow: var(--shadow-soft);
}
.dash-widget__body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dash-widget__body > .empty-state,
.dash-widget__body > .dash-donut { margin-block: auto; }
.dash-list {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
gap: 8px;
}
.dash-list__item {
align-items: center;
padding: 9px 12px;
border-bottom: 0;
border-radius: var(--radius-md);
background: var(--color-surface-soft);
}
.dash-list__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dash-list__label { font-weight: 700; font-size: 13.5px; color: var(--color-text); text-decoration: none; }
a.dash-list__label:hover { color: var(--color-primary-dark); text-decoration: underline; }
.dash-list__sub { font-size: 12px; color: var(--color-muted); }
.dash-list__item[data-row-href] { cursor: pointer; }
.dash-list__go { flex: none; width: 15px; height: 15px; margin-left: -4px; color: var(--color-faint); opacity: .5; transition: opacity .16s var(--ease), transform .16s var(--ease); }
.dash-list__item[data-row-href]:hover .dash-list__go { opacity: 1; transform: translateX(2px); }
.dash-list__value { font-weight: 800; font-size: 15px; white-space: nowrap; }
.dash-list__value--info { color: var(--color-text); }
.dash-list__value--success { color: var(--color-success); }
.dash-list__value--warning { color: var(--color-warning); }
.dash-list__value--danger { color: var(--color-danger); }
.dash-list__value--critical { color: var(--color-danger); }
.dash-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) {
.dash-alerts { grid-template-columns: 1fr 1fr; }
.dash-alert:only-child { grid-column: 1 / -1; }
}
.dash-alert { min-width: 0; }
.dash-alert__link {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
gap: 12px; padding: 11px 14px 11px 12px; border-radius: var(--radius-md);
background: var(--color-surface-soft); border-left: 3px solid var(--color-border-strong);
text-decoration: none; height: 100%;
transition: background .16s var(--ease), border-color .16s var(--ease);
}
a.dash-alert__link:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-soft)); }
.dash-alert__value {
font-size: 19px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums;
min-width: 1.6em; text-align: center; color: var(--color-heading);
}
.dash-alert__body { display: grid; gap: 2px; min-width: 0; }
.dash-alert__label { font-size: 13.5px; font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.dash-alert__sub { font-size: 12px; color: var(--color-muted); }
.dash-alert__go { width: 16px; height: 16px; color: var(--color-faint); opacity: 0; transition: opacity .16s var(--ease); }
a.dash-alert__link:hover .dash-alert__go { opacity: 1; }
.dash-alert--danger .dash-alert__link { border-left-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface-soft)); }
.dash-alert--danger a.dash-alert__link:hover { background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface-soft)); }
.dash-alert--danger .dash-alert__value { color: var(--color-danger); }
.dash-alert--warning .dash-alert__link { border-left-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface-soft)); }
.dash-alert--warning a.dash-alert__link:hover { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface-soft)); }
.dash-alert--warning .dash-alert__value { color: var(--color-warning); }
.dash-alert--info .dash-alert__link { border-left-color: var(--color-primary); }
.dash-alert--info .dash-alert__value { color: var(--color-primary-dark); }
.dash-chart { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dash-chart__row { position: relative; display: grid; grid-template-columns: minmax(88px, 42%) 1fr minmax(52px, max-content); gap: 10px; align-items: center; font-size: 13px; padding: 5px 8px; margin: 0 -8px; border-radius: var(--radius-md); transition: background .16s var(--ease); }
.dash-chart__label { color: var(--color-muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; line-height: 1.3; }
.dash-chart__track { height: 9px; border-radius: var(--radius-pill); background: var(--chart-track); overflow: hidden; }
.dash-chart__fill { display: block; width: var(--w, 0); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); transition: width .5s var(--ease), filter .16s var(--ease); }
.dash-chart__value { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-chart__hit { position: absolute; inset: 0; border-radius: var(--radius-md); z-index: 1; }
.dash-chart__hit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -1px; }
.dash-chart__row--link { cursor: pointer; }
.dash-chart__row--link:hover { background: var(--color-surface-soft); }
.dash-chart__row--link:hover .dash-chart__label { color: var(--color-text); }
.dash-chart__row--link:hover .dash-chart__fill { filter: brightness(1.08) saturate(1.05); }
.tone--primary { --seg: var(--color-primary); }
.tone--success { --seg: var(--color-success); }
.tone--warning { --seg: var(--chart-amber, var(--color-warning)); }
.tone--danger { --seg: var(--color-danger); }
.tone--coral { --seg: var(--color-coral); }
.tone--beige { --seg: var(--chart-sand, var(--color-beige)); }
.tone--violet { --seg: var(--color-violet); }
.tone--muted { --seg: var(--color-faint); }
.dash-linechart { display: flex; flex-direction: column; gap: 9px; }
.dash-linechart__plot { position: relative; display: block; border-radius: var(--radius-md); text-decoration: none; color: inherit; }
a.dash-linechart__plot { cursor: pointer; }
a.dash-linechart__plot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.dash-linechart__plot svg { display: block; width: 100%; height: 158px; overflow: visible; }
.dash-linechart__grid { stroke: var(--color-divider); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-linechart__area {
fill: var(--seg); opacity: 0.26; transition: opacity .16s var(--ease);
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 55%, transparent 92%);
mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 55%, transparent 92%);
}
.dash-linechart__line { fill: none; stroke: var(--seg); stroke-width: 3.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
a.dash-linechart__plot:hover .dash-linechart__area { opacity: 0.34; }
.dash-linechart__ylabels { position: absolute; inset: 0; pointer-events: none; }
.dash-linechart__ylabels span { position: absolute; left: 0; transform: translateY(-50%); font-size: 10.5px; font-weight: 600; color: var(--color-faint); background: color-mix(in srgb, var(--color-surface) 72%, transparent); padding: 0 4px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.dash-linechart__overlay { position: absolute; inset: 0; pointer-events: none; }
.dash-linechart__cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border-strong); transform: translateX(-0.5px); }
.dash-linechart__dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--seg); box-shadow: 0 0 0 2px var(--color-surface); transform: translate(-50%, -50%); }
.dash-linechart__dot--end { width: 8px; height: 8px; }
.dash-linechart__dot--focus { width: 11px; height: 11px; box-shadow: 0 0 0 2px var(--color-surface), 0 2px 6px rgba(0, 0, 0, .25); }
.dash-linechart__tip { position: absolute; z-index: 5; min-width: 132px; max-width: 220px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-md); font-size: 12px; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
.dash-linechart__tip.is-below { transform: translate(-50%, 12px); }
.dash-linechart__tip-date { font-weight: 700; color: var(--color-heading); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.dash-linechart__tip-row { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.dash-linechart__tip-key { width: 12px; height: 2px; border-radius: 2px; background: var(--seg); flex: none; }
.dash-linechart__tip-name { color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-linechart__tip-val { margin-left: auto; font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }
.dash-linechart__axis { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--color-faint); font-variant-numeric: tabular-nums; padding-left: 2px; }
.dash-donut { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.dash-donut .chart-legend { max-width: 340px; }
.dash-donut__ring { position: relative; width: 176px; height: 176px; flex: none; }
.dash-donut__ring svg { display: block; width: 100%; height: 100%; transform: rotate(0); }
.dash-donut__bg { fill: none; stroke: var(--chart-track); stroke-width: 10.6; }
.dash-donut__seg { fill: none; stroke: var(--seg); stroke-width: 10.6; transition: stroke-width .16s var(--ease), opacity .16s var(--ease); }
.dash-donut__seg.is-link { cursor: pointer; }
.dash-donut.has-active .dash-donut__seg:not(.is-active) { opacity: 0.45; }
.dash-donut__seg.is-active { stroke-width: 11.8; }
.dash-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; padding: 0 36px; }
.dash-donut__center strong { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-donut__center--md strong { font-size: 17px; }
.dash-donut__center--sm strong { font-size: 14px; }
.dash-donut__center--xs strong { font-size: 12px; }
.dash-donut__center span {
font-size: 11px; color: var(--color-muted); line-height: 1.25;
white-space: nowrap;
}
.dash-donut__center span.is-wrapped { white-space: normal; text-wrap: balance; }
.dash-donut__center span.is-dropped { display: none; }
.dash-donut__center.is-active strong { color: var(--seg, var(--color-heading)); }
.chart-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; min-width: 160px; }
.chart-legend { font-size: 12.5px; color: var(--color-muted); }
.chart-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; border-radius: var(--radius-sm); }
.chart-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--seg); flex: none; }
.chart-legend__track { display: none; }
.chart-legend a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend a:hover { color: var(--color-primary); text-decoration: underline; }
.chart-legend li > span:not(.chart-legend__dot):not(.chart-legend__val):not(.chart-legend__track) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend__val { margin-left: auto; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-legend__pct { color: var(--color-muted); font-weight: 600; }
.chart-legend--row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.chart-legend--row .chart-legend__val { margin-left: 2px; }
[data-donut-legend] li { padding: 4px 7px; margin: 0 -7px; transition: background .16s var(--ease); flex-wrap: wrap; }
[data-donut-legend] li[data-url] { cursor: pointer; }
[data-donut-legend] li.is-active { background: var(--color-surface-soft); }
[data-donut-legend] li.is-active .chart-legend__dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--seg) 22%, transparent); }
[data-donut-legend] li > span:not(.chart-legend__dot):not(.chart-legend__val),
[data-donut-legend] li > a { white-space: normal; overflow: visible; flex: 1 1 auto; min-width: 0; }
[data-donut-legend] .chart-legend__val {
margin-left: 17px; flex-basis: calc(100% - 17px); text-align: left;
}
.dash-actions {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px;
}
.dash-action {
justify-content: flex-start; gap: 9px; min-width: 0;
white-space: normal; text-align: left; line-height: 1.25;
}
.dash-action .ui-icon { flex: none; display: inline-flex; }
.dash-action .ui-icon svg { width: 17px; height: 17px; }
.dash-status { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dash-status__badge { font-size: 13px; padding: 6px 12px; }
.dash-status__list { width: 100%; }
.dash-status__link { align-self: flex-start; }
.dash-table th { text-align: left; }
.dash-employee .dash-cards { grid-template-columns: 1fr; }
.dash-employee .dash-actions { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
.dash-metrics { grid-template-columns: repeat(2, 1fr); }
.dash-cards { grid-template-columns: 1fr; }
.dash-actions { grid-template-columns: 1fr; }
.dash-filters__row { flex-direction: column; align-items: stretch; }
.dash-filters .input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.dash-metric, .dash-chart__fill, .dash-chart__row, .dash-donut__seg,
.dash-linechart__area, [data-donut-legend] li { transition: none; }
.dash-metric:hover { transform: none; }
}
.dash-gauge { display: flex; align-items: center; justify-content: center; padding: 4px 0; }
.dash-gauge__ring { position: relative; width: 152px; height: 152px; flex: none; }
.dash-gauge__ring svg { display: block; width: 100%; height: 100%; }
.dash-gauge__bg { fill: none; stroke: var(--chart-track); stroke-width: 9.5; }
.dash-gauge__arc {
fill: none; stroke: var(--seg); stroke-width: 9.5; stroke-linecap: round;
transition: stroke-dasharray .6s var(--ease);
}
.dash-gauge__center {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 0 30px;
}
.dash-gauge__center strong {
font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-heading);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dash-gauge__center--md strong { font-size: 21px; }
.dash-gauge__center--sm strong { font-size: 17px; }
.dash-gauge__center--xs strong { font-size: 14px; }
.dash-gauge__center span {
font-size: 11.5px; color: var(--color-muted); line-height: 1.25;
max-width: 88px; overflow-wrap: anywhere;
}
.dash-heat { display: flex; flex-direction: column; gap: 8px; --heat-cell: 20px; --heat-max: 36px; }
.dash-heat__months {
display: grid; grid-auto-flow: column;
grid-auto-columns: minmax(var(--heat-cell), var(--heat-max)); gap: 3px;
margin-left: 26px; font-size: 10.5px; color: var(--color-faint); height: 12px;
justify-content: center;
}
.dash-heat__months span { grid-column: calc(var(--i) + 1); white-space: nowrap; overflow: visible; }
.dash-heat__body { display: flex; gap: 6px; justify-content: center; }
.dash-heat__days {
display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px;
font-size: 10px; color: var(--color-faint); width: 20px; align-items: center;
}
.dash-heat__grid {
display: grid; grid-auto-flow: column;
grid-template-rows: repeat(7, auto);
grid-auto-columns: minmax(var(--heat-cell), var(--heat-max));
gap: 3px; min-width: 0; overflow-x: auto; padding-bottom: 2px;
}
.dash-heat__cell {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border-radius: 5px; background: color-mix(in srgb, var(--seg) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--seg) 34%, transparent);
color: var(--color-muted); font-size: 9px; text-decoration: none;
transition: transform .14s var(--ease), background-color .14s var(--ease);
}
.dash-heat__cell span { opacity: 0; }
a.dash-heat__cell:hover { transform: scale(1.18); background: color-mix(in srgb, var(--seg) 46%, transparent); z-index: 1; }
.dash-heat__cell--void { background: none; border-color: transparent; }
.dash-heat__legend { margin-top: 2px; }
.dash-heat__legend .chart-legend__val { margin-left: 4px; font-weight: 800; }
@media (min-width: 900px) {
.dash-heat { --heat-cell: 24px; }
.dash-heat__cell span { opacity: .75; }
}
.dblock--l .dash-heat { --heat-max: 48px; }
.dcanvas { position: relative; display: flex; flex-direction: column; gap: 22px; }
.dcanvas__section { gap: 12px; }
.dcanvas__head { min-height: 0; }
.dcanvas__head.is-empty { display: none; }
.dcanvas__grid {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-cards);
align-items: stretch;
}
.dblock { grid-column: span var(--span, 3); display: flex; flex-direction: column; min-width: 0; }
.dblock--metric { align-self: start; }
.dblock__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dblock__body > * { flex: 1; }
.dblock:has(.dash-widget__body > .empty-state) { align-self: start; }
.dash-widget__body > .empty-state { padding: 14px 12px; gap: 8px; }
.dash-widget__body > .empty-state .empty-state__icon { width: 40px; height: 40px; border-radius: 13px; }
.dash-widget__body > .empty-state .empty-state__icon svg { width: 21px; height: 21px; }
.dash-widget__body > .empty-state .empty-state__text { font-size: 13px; }
.dsec .dash-widget:has(.empty-state) { min-height: 0; }
.dsec .dash-widget__body > .empty-state { padding: 6px 2px 2px; gap: 0; text-align: left; }
.dsec .dash-widget__body > .empty-state .empty-state__icon { display: none; }
.dsec .dash-widget__body > .empty-state .empty-state__text {
font-size: 12.5px; color: var(--color-faint);
}
@media (max-width: 1000px) {
.dcanvas__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dblock { grid-column: span var(--span-sm, 6); }
}
@media (max-width: 640px) {
.dcanvas__grid { grid-template-columns: 1fr; }
.dblock { grid-column: 1 / -1; }
}
.lswitch__toggle { max-width: 240px; }
.lswitch__toggle b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lswitch__menu {
right: 0; min-width: 288px; max-width: 340px; padding: 6px;
max-height: min(calc(70vh * var(--vu)), 520px); overflow-y: auto;
}
.lswitch__group {
padding: 8px 10px 4px; font-size: 10.5px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase; color: var(--color-faint);
}
.lswitch__item {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
width: 100%; padding: 8px 30px 8px 10px; text-align: left;
border: none; background: none; cursor: pointer; border-radius: var(--radius-sm);
color: var(--color-text); text-decoration: none;
transition: background-color .14s var(--ease);
}
.lswitch__item:hover { background: var(--color-surface-soft); }
.lswitch__item.is-on { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.lswitch__name { font-size: 13px; font-weight: 700; }
.lswitch__desc { font-size: 11.5px; color: var(--color-muted); line-height: 1.35; }
.lswitch__mark { position: absolute; right: 10px; top: 9px; color: var(--color-primary); font-weight: 800; }
.lswitch__item--action {
flex-direction: row; align-items: center; gap: 8px;
margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--color-border);
border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--color-primary);
}
.lswitch__item--action .lswitch__name { color: var(--color-primary); }
.dpresets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.dpresets__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dpresets__head b { font-size: 15px; font-weight: 800; color: var(--color-heading); }
.dpresets__head span { font-size: 12.5px; color: var(--color-muted); }
.dpresets__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.dpreset {
display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface); text-decoration: none; color: inherit; cursor: pointer;
transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.dpreset:hover {
border-color: var(--color-primary); transform: translateY(-2px);
box-shadow: 0 12px 28px -20px rgba(0, 0, 0, .5);
}
.dpreset.is-on { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.dpreset__name { font-size: 13.5px; font-weight: 800; color: var(--color-heading); }
.dpreset__desc { font-size: 11.5px; color: var(--color-muted); line-height: 1.35; }
.dpreset--own { padding: 0; }
.dpreset__hit {
display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
width: 100%; padding: 12px 14px; border: none; background: none;
cursor: pointer; text-align: left; border-radius: inherit;
}
.dbuild { display: flex; flex-direction: column; gap: 12px; }
.dbuild__bar {
position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20;
display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 12px 16px; border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
box-shadow: 0 14px 34px -26px rgba(0, 0, 0, .5);
}
.dbuild__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 220px; max-width: 320px; }
.dbuild__name-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.dbuild__hint { font-size: 12.5px; color: var(--color-muted); padding: 0 2px; }
.dbuild__hint b { color: var(--color-heading); }
.dbuild__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dbuild__foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.dash-customize { white-space: nowrap; }
.dcanvas--edit .dblock {
position: relative; padding: 6px; border-radius: var(--radius-lg);
border: 1px dashed var(--color-border-strong);
background: color-mix(in srgb, var(--color-primary) 3%, transparent);
transition: border-color .16s var(--ease), background-color .16s var(--ease), opacity .16s var(--ease);
}
.dcanvas--edit .dblock:not(.is-settled) {
animation: dblock-in .22s var(--ease) backwards;
}
.dcanvas--edit .dblock:hover { border-color: var(--color-primary); }
.dcanvas--edit .dblock { cursor: pointer; }
.dcanvas--edit .dblock.is-picked {
border-style: solid; border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.dcanvas--edit .dblock.is-picked::after {
content: ""; position: absolute; top: -7px; right: -7px; z-index: 2;
width: 18px; height: 18px; border-radius: 50%;
background: var(--color-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E");
background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
box-shadow: 0 0 0 2px var(--color-bg);
}
.dcanvas--edit.is-dragging-block .dblock.is-picked { border-color: var(--color-primary); }
.dpick {
position: fixed; z-index: 50; left: 50%; bottom: 18px; transform: translateX(-50%);
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
max-width: min(680px, calc(100vw - 32px));
padding: 10px 10px 10px 16px; border-radius: 999px;
border: 1px solid var(--color-border-strong);
background: color-mix(in srgb, var(--color-bg) 94%, transparent);
backdrop-filter: saturate(160%) blur(18px);
-webkit-backdrop-filter: saturate(160%) blur(18px);
box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .6);
animation: dpick-in .18s var(--ease);
}
.dpick[hidden] { display: none; }
@keyframes dpick-in {
from { opacity: 0; transform: translate(-50%, 10px); }
to { opacity: 1; transform: translateX(-50%); }
}
.dpick__count { font-size: 13.5px; font-weight: 700; color: var(--color-heading); white-space: nowrap; }
.dpick__acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 819px) {
.dpick {
left: 12px; right: 12px; transform: none; max-width: none;
bottom: calc(82px + env(safe-area-inset-bottom));
border-radius: var(--radius-lg);
padding: 10px 74px 10px 12px;
justify-content: space-between;
}
@keyframes dpick-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
}
.dbuild__hint--pick { display: none; }
@media (min-width: 1200px) {
.dbuild__hint--pick { display: block; flex: 0 1 auto; text-align: center; }
}
.dcanvas--edit .dblock__body { pointer-events: none; }
.dcanvas__slot {
position: absolute; z-index: 0; pointer-events: none;
border: 2px dashed var(--color-primary); border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.dcanvas--edit .dblock.is-dragging {
z-index: 5; will-change: transform;
border-style: solid; border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
box-shadow:
0 0 0 1px var(--color-primary),
0 22px 44px -20px rgba(0, 0, 0, .55);
pointer-events: none;
}
.dcanvas--edit .dblock__grab { touch-action: none; }
body.is-dragging-block { user-select: none; -webkit-user-select: none; }
body.is-dragging-block .dcanvas--edit,
body.is-dragging-block .dlib { touch-action: none; }
.dcanvas--edit.is-dragging-block .dblock:hover { border-color: var(--color-border-strong); }
.dcanvas--edit.is-dragging-block .dblock__resize { opacity: 0; }
.dcanvas__ghost {
grid-column: span var(--span, 3); min-height: 96px;
pointer-events: none;
border: 2px dashed var(--color-primary); border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
animation: dghost-in .18s var(--ease-out) backwards;
}
@media (max-width: 1000px) { .dcanvas__ghost { grid-column: span var(--span-sm, 6); } }
@media (max-width: 640px) { .dcanvas__ghost { grid-column: 1 / -1; } }
@keyframes dghost-in {
from { opacity: 0; transform: scale(.94); }
to { opacity: 1; transform: none; }
}
.dcanvas--edit .dblock.is-landed { animation: dblock-land .6s var(--ease) both; }
@keyframes dblock-land {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 55%, transparent); }
60% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-primary) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent); }
}
@keyframes dblock-in {
from { opacity: 0; transform: translateY(8px) scale(.98); }
to { opacity: 1; transform: none; }
}
.dblock.is-leaving { opacity: 0; transform: scale(.94); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.dblock__bar {
display: flex; align-items: center; gap: 6px; padding: 0 4px 6px;
color: var(--color-muted); font-size: 11.5px;
}
.dblock__grab { cursor: grab; color: var(--color-faint); display: inline-flex; }
.dcanvas--edit .dblock:active .dblock__grab { cursor: grabbing; }
.dblock__name {
font-weight: 700; color: var(--color-text); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.dblock__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.dblock__btn {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent;
background: none; color: var(--color-muted); cursor: pointer;
transition: background-color .14s var(--ease), color .14s var(--ease);
}
.dblock__btn:hover { background: var(--color-surface-soft); color: var(--color-text); }
.dblock__btn--drop:hover { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }
.dblock__resize {
position: absolute; top: 6px; right: -12px; bottom: 6px; width: 24px;
display: flex; align-items: center; justify-content: center;
cursor: col-resize; touch-action: none; z-index: 2;
opacity: .45; transition: opacity .14s var(--ease);
}
.dcanvas--edit .dblock:hover .dblock__resize,
.dblock__resize:focus-visible,
.dblock.is-resizing .dblock__resize { opacity: 1; }
.dblock__resize:focus-visible { outline: none; }
.dblock__resize-grip {
width: 5px; height: 34px; border-radius: 3px;
background: var(--color-border-strong);
transition: background-color .14s var(--ease), height .14s var(--ease);
}
.dblock__resize:hover .dblock__resize-grip,
.dblock__resize:focus-visible .dblock__resize-grip,
.dblock.is-resizing .dblock__resize-grip { background: var(--color-primary); height: 46px; }
.dcanvas--edit.is-resizing .dblock:hover { border-color: var(--color-border-strong); }
.dcanvas--edit .dblock.is-resizing { border-color: var(--color-primary); border-style: solid; }
.dcanvas__grid.is-resizing {
background-image: repeating-linear-gradient(
to right,
color-mix(in srgb, var(--color-primary) 12%, transparent) 0,
color-mix(in srgb, var(--color-primary) 12%, transparent) 1px,
transparent 1px,
transparent calc((100% + 16px) / 12)
);
background-position: 0 0;
}
.dcanvas__title-input {
flex: 1; min-width: 0; max-width: 340px;
padding: 5px 10px; border-radius: var(--radius-sm);
border: 1px solid transparent; background: none;
font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--color-heading);
}
.dcanvas__title-input:hover { border-color: var(--color-border); }
.dcanvas__title-input:focus { border-color: var(--color-primary); background: var(--color-surface); outline: none; }
.dcanvas__title-input::placeholder { color: var(--color-faint); font-weight: 600; }
.dcanvas__section-tools { display: flex; align-items: center; gap: 4px; }
.dcanvas--edit .dsec__head { cursor: grab; gap: 10px; }
.dcanvas--edit .dsec__head:active { cursor: grabbing; }
.dcanvas--edit .dsec__intro { flex: 1 1 auto; }
.dcanvas--edit .dsec__head button { cursor: pointer; }
.dsec__grab { align-self: center; display: inline-flex; color: var(--color-faint); }
.dsec__grab { touch-action: none; position: relative; }
.dsec__grab::after { content: ""; position: absolute; inset: -11px; touch-action: none; }
.dcanvas--edit .dsec__head:hover .dsec__grab { color: var(--color-primary); }
.dcanvas--edit .dcanvas__section.is-dragging {
z-index: 5; will-change: transform;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
outline: 2px solid var(--color-primary); outline-offset: 10px;
box-shadow: 0 26px 52px -24px rgba(0, 0, 0, .55);
pointer-events: none;
}
.dcanvas--edit .dcanvas__section.is-landed {
border-radius: var(--radius-lg);
animation: dblock-land .6s var(--ease) both;
}
.dcanvas__add {
grid-column: span 6;
display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 88px; padding: 14px; cursor: pointer;
border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
background: none; color: var(--color-muted); font-size: 13px; font-weight: 650;
transition: border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);
}
.dcanvas__add:hover {
border-color: var(--color-primary); color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
transition-duration: 0s;
}
.dcanvas__add--section { min-height: 56px; width: 100%; grid-column: 1 / -1; }
.dsec__grid > .dcanvas__add:only-child { grid-column: 1 / -1; min-height: 104px; }
.dcanvas--edit .dsec__intro .dcanvas__title-input {
width: auto; max-width: 100%;
justify-self: start;
font-size: 21px; letter-spacing: -0.025em;
padding: 4px 8px; margin: -4px -8px;
}
.dcanvas--edit .dcanvas__section--own .dsec__head { align-items: center; min-height: 40px; }
.dtheme-pop {
position: fixed; z-index: 140; min-width: 210px; max-width: 280px;
padding: 6px; border-radius: var(--radius-md);
border: 1px solid var(--color-border); background: var(--color-surface);
box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .45);
display: flex; flex-direction: column; gap: 2px;
}
.dtheme-pop__head {
padding: 4px 8px 6px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; color: var(--color-faint);
}
.dtheme-pop__item {
display: block; width: 100%; text-align: left; cursor: pointer;
padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
background: none; color: var(--color-text); font-size: 13px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dtheme-pop__item:hover { background: var(--color-surface-soft); }
.dtheme-pop__item.is-here { color: var(--color-faint); cursor: default; }
.dtheme-pop__item.is-here::after { content: " — здесь"; }
.dtheme-pop__item.is-here:hover { background: none; }
.dcanvas__grid {
border-radius: var(--radius-lg);
transition: background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dcanvas__grid.is-drop-target {
background: color-mix(in srgb, var(--color-primary) 5%, transparent);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.dlib {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
width: min(400px, 92vw); display: flex; flex-direction: column;
background: var(--color-surface); border-left: 1px solid var(--color-border);
box-shadow: -24px 0 60px -40px rgba(0, 0, 0, .7);
animation: dlib-in .24s var(--ease);
}
.dlib[hidden] { display: none; }
@keyframes dlib-in { from { transform: translateX(100%); } to { transform: none; } }
.dlib.is-closing {
animation: dlib-out .2s var(--ease) forwards;
pointer-events: none;
}
@keyframes dlib-out { from { transform: none; } to { transform: translateX(100%); } }
.dlib__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--color-border); }
.dlib__title { font-size: 16px; font-weight: 800; color: var(--color-heading); }
.dlib__sub { font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }
.dlib__close {
margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 8px;
border: 1px solid var(--color-border); background: none; color: var(--color-muted); cursor: pointer;
}
.dlib__close:hover { background: var(--color-surface-soft); color: var(--color-text); }
.dlib__search { position: relative; padding: 12px 18px 8px; }
.dlib__search svg { position: absolute; left: 30px; top: 50%; transform: translateY(-25%); color: var(--color-faint); pointer-events: none; }
.dlib__input { width: 100%; padding-left: 32px; }
.dlib__body { flex: 1; overflow-y: auto; padding: 6px 12px 20px; }
.dlib__group + .dlib__group { margin-top: 14px; }
.dlib__group-title {
font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
color: var(--color-faint); padding: 8px 6px 6px;
}
.dlib__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dlib__item {
display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px;
border-radius: var(--radius-md); border: 1px solid transparent;
transition: background-color .14s var(--ease), border-color .14s var(--ease);
}
.dlib__item:hover { background: var(--color-surface-soft); border-color: var(--color-border); transition-duration: 0s; }
.dlib__item[hidden] { display: none; }
.dlib__group[hidden] { display: none; }
.dlib__item.is-dragging {
opacity: .4; border-color: var(--color-primary); border-style: dashed;
}
.dlib__icon {
flex: none; width: 22px; height: 22px; margin-top: 3px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--color-primary);
}
.dlib__icon svg { width: 20px; height: 20px; }
.dlib__icon--chart { color: var(--color-success); }
.dlib__icon--list { color: var(--color-violet); }
.dlib__text { min-width: 0; flex: 1; }
.dlib__name { display: block; font-size: 13px; font-weight: 700; color: var(--color-text); }
.dlib__desc { display: block; font-size: 11.5px; color: var(--color-muted); line-height: 1.35; margin-top: 1px; }
.dlib__item.is-used .dlib__add { display: none; }
.dlib__item.is-used .dlib__drop { display: grid; }
.dlib__item.is-used .dlib__icon,
.dlib__item.is-used .dlib__text { opacity: .55; }
.dlib__add {
align-self: center; flex: none; width: 26px; height: 26px; border-radius: 8px;
border: 1px solid var(--color-border); background: none; color: var(--color-primary); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
position: relative;
transition: background-color .14s var(--ease), color .14s var(--ease);
}
.dlib__add::after { content: ""; position: absolute; inset: -8px; border-radius: 12px; }
.dlib__add:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); transition-duration: 0s; }
.dlib__drop {
display: none;
align-self: center; flex: none;
padding: 4px 9px; border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
background: color-mix(in srgb, var(--color-success) 12%, transparent);
color: var(--color-success);
font-size: 10.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
position: relative;
transition: background-color .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.dlib__drop::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; }
.dlib__drop-state,
.dlib__drop-act {
grid-area: 1 / 1;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.dlib__drop-act { opacity: 0; }
.dlib__drop:hover,
.dlib__drop:focus-visible {
background: color-mix(in srgb, var(--color-danger) 15%, transparent);
border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
color: var(--color-danger);
transition-duration: 0s;
}
.dlib__drop:focus-visible { outline: none; }
.dlib__drop:hover .dlib__drop-state,
.dlib__drop:focus-visible .dlib__drop-state { opacity: 0; }
.dlib__drop:hover .dlib__drop-act,
.dlib__drop:focus-visible .dlib__drop-act { opacity: 1; }
@media (hover: none) {
.dlib__drop {
color: var(--color-danger);
border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}
.dlib__drop-state { opacity: 0; }
.dlib__drop-act { opacity: 1; }
}
.dlib__empty { padding: 20px 8px; font-size: 13px; color: var(--color-muted); text-align: center; }
.dlib__inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dlib__shelf {
flex: 0 0 auto; max-height: 52%; display: flex; flex-direction: column;
border-bottom: 1px solid var(--color-border);
}
@media (max-width: 640px) { .dlib__shelf { max-height: 40%; } }
.dlib__shelf .dlib__group--kit { overflow-y: auto; min-height: 0; }
.dlib__kits {
padding: 4px 18px 10px;
display: flex; flex-direction: column; gap: 6px;
}
.dlib__kits-label {
font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--color-faint);
}
.dlib__kits-hint { font-size: 12px; color: var(--color-muted); }
.dlib__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dkit {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--color-border); background: var(--color-surface-soft);
color: var(--color-text); font-size: 12.5px; font-weight: 700;
transition: background-color .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.dkit:hover { border-color: var(--color-primary); transition-duration: 0s; }
.dkit.is-on {
background: var(--color-primary); border-color: var(--color-primary);
color: var(--color-on-primary);
}
.dkit__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkit__count {
font-size: 11px; font-weight: 800; padding: 0 5px; border-radius: 999px;
background: color-mix(in srgb, var(--color-text) 10%, transparent);
}
.dkit.is-on .dkit__count { background: color-mix(in srgb, var(--color-on-primary) 24%, transparent); }
.dkit--new { color: var(--color-muted); border-style: dashed; background: none; }
.dkit--enable:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.dkit--enable:hover .dkit__count { background: color-mix(in srgb, var(--color-on-primary) 24%, transparent); }
.dcat__kits {
display: flex; flex-direction: column; gap: 6px;
padding: 0 0 14px; margin-bottom: 14px;
border-bottom: 1px solid var(--color-border);
}
.dcat__kits-label {
font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase; color: var(--color-faint);
}
.dcat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dlib__group--kit {
border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 4%, transparent);
padding: 8px; margin: 0 12px 12px;
}
.dlib__kit-head { display: flex; align-items: center; gap: 6px; padding: 0 2px 8px; }
.dlib__kit-name {
flex: 1; min-width: 0; font-weight: 700; font-size: 13px;
padding: 5px 8px; background: transparent; border-color: transparent;
}
.dlib__kit-name:hover { border-color: var(--color-border); }
.dlib__kit-name:focus { background: var(--color-surface); border-color: var(--color-primary); }
.dlib__kit-tools { display: flex; align-items: center; gap: 4px; }
.dlib__acts { display: flex; gap: 6px; padding: 0 18px 10px; }
.dlib:not(:has([data-kit-group])) .dlib__acts { display: none; }
.dlib__acts .btn { white-space: nowrap; }
.dlib__kit-apply { white-space: nowrap; }
.dlib__kit-drop {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 8px; border: 1px solid transparent;
background: none; color: var(--color-muted); cursor: pointer;
transition: background-color .14s var(--ease), color .14s var(--ease);
}
.dlib__kit-drop:hover {
background: color-mix(in srgb, var(--color-danger) 14%, transparent);
color: var(--color-danger); transition-duration: 0s;
}
.dlib__kit-empty { font-size: 12.5px; color: var(--color-muted); padding: 2px 4px 6px; }
.dlib__grab {
align-self: center; display: inline-flex; padding: 0; border: 0; background: none;
color: var(--color-faint); cursor: grab; touch-action: none; position: relative;
}
.dlib__grab::after { content: ""; position: absolute; inset: -9px; }
.dlib__grab:active { cursor: grabbing; }
.dlib__item--kit:hover .dlib__grab { color: var(--color-primary); }
.dlib__item--kit.is-sorting {
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
border-color: var(--color-primary);
}
.dlib__star {
align-self: center; display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 9px; cursor: pointer;
border: 1px solid transparent; background: none; color: var(--color-faint);
transition: background-color .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.dlib__star:hover { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, transparent); transition-duration: 0s; }
.dlib__star.is-on { color: var(--color-warning); }
.dlib__star.is-on svg { fill: currentColor; }
.dlib__item--kit .dlib__star:hover { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, transparent); }
@media (max-width: 1000px) {
.dblock__resize { display: none; }
}
@media (max-width: 640px) {
.dbuild__bar { position: static; }
.dblock__name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.dlib, .dlib.is-closing, .dcanvas--edit .dblock:not(.is-settled), .dcanvas__ghost { animation: none; }
.dcanvas--edit .dblock.is-landed { animation: none; }
.dcanvas__grid, .dash-gauge__arc, .dash-heat__cell { transition: none; }
}
.cell-danger { color: var(--color-danger); font-weight: 700; }
.cell-success { color: var(--color-success); font-weight: 700; }
.cell-warning { color: var(--color-warning); font-weight: 700; }
.cell-right { text-align: right; }
.money {
display: inline-flex; align-items: baseline; gap: 8px;
font-variant-numeric: tabular-nums;
}
.money__label { color: var(--color-muted); font-size: 12px; font-weight: 600; }
.money__value {
font-weight: 800; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap;
}
.money--sensitive .money__value { color: var(--color-text); }
.money--negative .money__value,
.money__value--negative { color: var(--color-danger); }
.card__body,
.report-card__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.notif-detail__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notif-detail__message {
color: var(--color-text); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap;
}
.notif-item__object {
display: block; margin-top: 4px; font-size: 12.5px; color: var(--color-muted);
}
:root { --page-max: 100%; }
.page { max-width: var(--page-max); width: 100%; margin-inline: auto; }
.page__title { font-size: 24px; }
.page__eyebrow {
display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
color: var(--color-primary-dark);
}
.glass {
background: color-mix(in srgb, var(--color-surface) 70%, transparent);
backdrop-filter: saturate(150%) blur(12px);
border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
.surface-alt { background: var(--color-surface-alt); }
.divider { height: 1px; background: var(--color-border); border: 0; margin: 4px 0; }
.divider--dashed { background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px); }
.kbd {
display: inline-flex; align-items: center; justify-content: center; gap: 2px;
min-width: 20px; height: 20px; padding: 0 6px;
font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--color-muted); background: var(--color-surface-soft);
border: 1px solid var(--color-border-strong); border-bottom-width: 2px;
border-radius: 6px;
}
.skeleton,
.skeleton-text,
.skeleton-line,
.skeleton-circle,
.skeleton-block {
position: relative; overflow: hidden;
background: color-mix(in srgb, var(--color-muted) 16%, var(--color-surface-soft));
border-radius: var(--radius-sm);
}
.skeleton::after,
.skeleton-text::after,
.skeleton-line::after,
.skeleton-circle::after,
.skeleton-block::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface) 60%, transparent), transparent);
transform: translateX(-100%); animation: skeleton-sweep 1.4s var(--ease) infinite;
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line--sm { height: 10px; }
.skeleton-line--lg { height: 18px; }
.skeleton-line--60 { width: 60%; } .skeleton-line--40 { width: 40%; } .skeleton-line--80 { width: 80%; }
.skeleton-circle { border-radius: 50%; width: 40px; height: 40px; }
.skeleton-block { height: 120px; border-radius: var(--radius-md); }
.skeleton-card {
padding: 20px; border-radius: var(--radius-xl);
border: 1px solid var(--color-border); background: var(--color-surface);
display: flex; flex-direction: column; gap: 12px;
}
@keyframes skeleton-sweep { to { transform: translateX(100%); } }
.htmx-indicator { opacity: 0; transition: opacity .2s var(--ease); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
.htmx-request { position: relative; }
[aria-busy="true"] { cursor: progress; }
.spinner {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--color-muted) 35%, transparent);
border-top-color: var(--color-primary); animation: spin .7s linear infinite; display: inline-block;
}
.spinner--lg { width: 30px; height: 30px; border-width: 3px; }
.loading-overlay {
position: absolute; inset: 0; display: grid; place-items: center; z-index: 5;
background: color-mix(in srgb, var(--color-surface) 55%, transparent);
backdrop-filter: blur(2px); border-radius: inherit;
}
.toast-stack {
position: fixed; z-index: 200; right: 20px; bottom: 20px;
display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(calc(100vw * var(--vu)) - 32px));
pointer-events: none;
}
.toast {
pointer-events: auto; display: flex; align-items: flex-start; gap: 12px;
padding: 13px 14px; border-radius: var(--radius-lg);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-pop); color: var(--color-text);
animation: toast-in .32s var(--ease-out) both;
}
.toast.is-leaving { animation: toast-out .28s var(--ease) both; }
.toast__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.toast__icon svg { width: 20px; height: 20px; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-weight: 700; font-size: 13.5px; }
.toast__msg { font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }
.toast__close { flex: 0 0 auto; background: transparent; border: 0; color: var(--color-faint); padding: 2px; border-radius: 6px; }
.toast__close:hover { color: var(--color-text); background: var(--color-surface-soft); }
.toast::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; }
.toast { position: relative; overflow: hidden; padding-left: 16px; }
.toast--success .toast__icon { color: var(--color-success); } .toast--success::before { background: var(--color-success); }
.toast--danger .toast__icon { color: var(--color-danger); } .toast--danger::before { background: var(--color-danger); }
.toast--warning .toast__icon { color: var(--color-warning); } .toast--warning::before { background: var(--color-warning); }
.toast--info .toast__icon { color: var(--color-primary); } .toast--info::before,
.toast::before { background: var(--color-primary); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
.chat-popup { flex-direction: column; align-items: stretch; gap: 8px; }
.chat-popup:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.chat-popup__head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.chat-popup__head:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 8px; }
.chat-popup__avatar {
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center; overflow: hidden;
background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
color: var(--color-primary); font-weight: 700; font-size: 15px;
}
.chat-popup__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-popup__text {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; overflow-wrap: anywhere;
}
.chat-popup__reply { display: flex; align-items: center; gap: 8px; }
.chat-popup__reply[hidden] { display: none; }
.chat-popup__input { flex: 1; min-width: 0; height: 34px; padding: 6px 10px; font-size: 13px; }
.chat-popup__send { flex: 0 0 auto; color: var(--color-primary); }
.chat-popup__send:hover { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.chat-popup.is-busy { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.chat-popup.is-sending .chat-popup__reply { opacity: .6; pointer-events: none; }
.chat-popup__note { font-size: 12px; }
.chat-popup__note--ok { color: var(--color-success); }
.chat-popup__note--err { color: var(--color-danger); }
.cmdk-backdrop {
position: fixed; inset: 0; z-index: 150;
background: color-mix(in srgb, var(--color-bg-deep) 55%, transparent);
backdrop-filter: blur(4px); display: grid; place-items: start center; padding-top: calc(12vh * var(--vu));
animation: fade-in .16s var(--ease) both;
}
.cmdk-backdrop[hidden] { display: none; }
.cmdk {
width: min(600px, calc(calc(100vw * var(--vu)) - 32px)); max-height: calc(62vh * var(--vu)); display: flex; flex-direction: column;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); overflow: hidden;
animation: pop-in .2s var(--ease-out) both;
}
.cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.cmdk__search svg { width: 18px; height: 18px; color: var(--color-faint); flex: 0 0 auto; }
.cmdk__input { flex: 1; border: 0; background: transparent; outline: none; color: var(--color-text); font-size: 15px; }
.cmdk__input::placeholder { color: var(--color-faint); }
.cmdk__list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cmdk__group { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-faint); }
.cmdk__item {
display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-md);
color: var(--color-text); font-size: 13.5px; font-weight: 550; cursor: pointer;
}
.cmdk__item svg { width: 17px; height: 17px; color: var(--color-muted); flex: 0 0 auto; }
.cmdk__item.is-active,
.cmdk__item:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.cmdk__item.is-active svg,
.cmdk__item:hover svg { color: var(--color-primary-dark); }
.cmdk__item mark { background: color-mix(in srgb, var(--color-primary) 26%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.cmdk__hint { margin-left: auto; font-size: 11px; color: var(--color-faint); }
.cmdk__empty { padding: 26px; text-align: center; color: var(--color-muted); font-size: 13.5px; }
.cmdk__foot { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--color-border); font-size: 11.5px; color: var(--color-faint); }
.cmdk__foot span { display: inline-flex; align-items: center; gap: 5px; }
.topbar__kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
@media (max-width: 720px) { .topbar__kbd { display: none; } }
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(4px); white-space: nowrap;
background: var(--color-heading); color: var(--color-bg);
font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 7px;
opacity: 0; pointer-events: none; transition: opacity .16s var(--ease), transform .16s var(--ease); z-index: 90;
box-shadow: var(--shadow-sm);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.chart-tip {
position: absolute; z-index: 20; pointer-events: none; padding: 8px 11px;
background: var(--color-heading); color: var(--color-bg);
border-radius: 9px; font-size: 12px; box-shadow: var(--shadow-pop);
transform: translate(-50%, -120%); white-space: nowrap; opacity: 0; transition: opacity .12s var(--ease);
}
.chart-tip.is-visible { opacity: 1; }
.chart-tip__val { font-weight: 800; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.segmented__btn { border: 0; background: transparent; color: var(--color-muted); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: calc(var(--radius-md) - 3px); transition: all .16s var(--ease); }
.segmented__btn:hover { color: var(--color-text); }
.segmented__btn.is-active { background: var(--color-surface); color: var(--color-primary-dark); box-shadow: var(--shadow-xs); }
@media (prefers-reduced-motion: reduce) {
.skeleton::after, .skeleton-text::after, .skeleton-line::after,
.skeleton-circle::after, .skeleton-block::after { animation: none !important; }
.toast, .cmdk, .cmdk-backdrop { animation: none !important; }
}
.page__head { padding-bottom: 4px; }
.page__title-row { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-chip {
display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
border-radius: var(--radius-pill); font-size: 13px; font-weight: 700;
color: var(--color-primary-dark); background: var(--color-primary-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.data-card { padding: 0; overflow: hidden; gap: 0; }
.data-card > .list-toolbar { padding: 16px 20px; border-bottom: 1px solid var(--color-divider); }
.data-card > .table-wrap { border-radius: 0; }
.data-card > .table-wrap .table thead th:first-child,
.data-card > .table-wrap .table thead th:last-child { border-radius: 0; }
.data-card > .table-wrap .table--sticky thead th { background: var(--color-surface); }
.data-card > .card__foot { padding: 16px 20px; margin-top: 0; }
.data-card .table tbody td { padding-left: 18px; }
.data-card .table thead th { padding-left: 18px; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.list-toolbar__title { font-size: 14px; font-weight: 700; color: var(--color-heading); }
.list-toolbar__meta { color: var(--color-muted); font-size: 13px; }
.list-toolbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.form-shell { max-width: 920px; width: 100%; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1200px) {
.form-shell:has(> .card ~ .card),
.pvz-form:has(> .card ~ .card) {
max-width: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.form-shell:has(> .card ~ .card) > .form-actions,
.form-shell:has(> .card ~ .card) > .alert,
.form-shell:has(> .card ~ .card) > .card--wide,
.pvz-form:has(> .card ~ .card) > .form-actions,
.pvz-form:has(> .card ~ .card) > .alert,
.pvz-form:has(> .card ~ .card) > .card--wide { grid-column: 1 / -1; }
.form-shell { max-width: 1180px; }
.card--form { max-width: 1180px; }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.form-actions--sticky {
position: sticky; bottom: 0; z-index: 12;
margin: 6px 0 -4px; padding: 14px 18px;
align-items: center;
background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
box-shadow: 0 -10px 28px -18px rgba(15, 20, 35, .55), var(--shadow-sm);
}
.form-actions--sticky .btn { min-width: 150px; }
.form-actions--sticky .cell-muted { font-size: 12.5px; line-height: 1.4; }
.map-embed {
position: relative; overflow: hidden;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface-soft);
min-height: 320px;
}
.map-embed__iframe {
position: relative; z-index: 2; display: block; border: 0;
width: 100%; height: min(calc(46vh * var(--vu)), 420px); min-height: 320px;
background: transparent;
opacity: 0; transition: opacity .4s var(--ease);
}
.map-embed__iframe.is-loaded { opacity: 1; }
.map-embed__loader {
position: absolute; inset: 0; z-index: 1;
display: grid; place-items: center; gap: 10px;
color: var(--color-muted); font-size: 13px;
}
.map-embed__loader::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(100deg,
transparent 30%,
color-mix(in srgb, var(--color-surface) 65%, transparent) 50%,
transparent 70%);
background-size: 220% 100%;
animation: skeleton-shimmer-bg 1.4s linear infinite;
}
@keyframes skeleton-shimmer-bg {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
.map-embed__badge {
position: absolute; z-index: 3; top: 12px; left: 12px;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-surface) 88%, transparent);
backdrop-filter: blur(6px);
border: 1px solid var(--color-border);
color: var(--color-text); font-size: 12px; font-weight: 600;
box-shadow: var(--shadow-sm); pointer-events: none;
}
.map-embed__badge svg { width: 14px; height: 14px; color: var(--color-primary); }
.schedule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.schedule-list__row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 6px 10px; border-radius: var(--radius-sm); font-size: 13px;
}
.schedule-list__row:nth-child(odd) { background: var(--color-surface-alt); }
.schedule-list__row.is-today {
background: var(--color-primary-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.schedule-list__days { color: var(--color-muted); font-weight: 500; }
.schedule-list__row.is-today .schedule-list__days { color: var(--color-primary-dark); font-weight: 600; }
.schedule-list__hours { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule-list__hours--closed { color: var(--color-faint); font-weight: 500; }
.camera-player__loader-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 16px; border-radius: 999px;
background: rgba(7, 11, 18, 0.72); backdrop-filter: blur(6px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.35);
}
.camera-player__loader .spinner {
width: 20px; height: 20px; border-width: 2.5px;
border-color: rgba(255,255,255,.18); border-top-color: #fff;
}
.camera-player__loader-label { font-size: 13px; color: rgba(255,255,255,.85); white-space: nowrap; }
.camera-card.is-loading .camera-card__media::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
background-size: 220% 100%;
animation: skeleton-shimmer-bg 1.2s linear infinite;
}
.grid--detail { align-items: start; }
.detail-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.detail-stack--unwrap { display: contents; }
@media (max-width: 819px) {
.detail-stack--employee { display: contents; }
.card--emp-notes { order: 2; }
}
.pvz-assignment-list--compact li { padding: 8px 0; }
.page__head--compact { align-items: center; padding-bottom: 0; flex-shrink: 0; row-gap: 6px; }
.page__head--compact > div:first-child {
display: grid; flex: 1 1 auto; min-width: 0;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "back title" "back sub";
align-items: center; column-gap: 10px;
}
.page__head--compact > div:first-child:has(> .chat-head-avatar) {
grid-template-columns: auto auto minmax(0, 1fr);
grid-template-areas: "back avatar title" "back avatar sub";
}
.page__head--compact > div:first-child:not(:has(> .page__subtitle)) {
grid-template-areas: "back title";
}
.page__head--compact > div:first-child:has(> .chat-head-avatar):not(:has(> .page__subtitle)) {
grid-template-areas: "back avatar title";
}
.page__head--compact > div:first-child > .chat-back { grid-area: back; }
.page__head--compact > div:first-child > .chat-head-avatar { grid-area: avatar; }
.page__head--compact .page__title { grid-area: title; font-size: 16px; min-width: 0; }
.page__head--compact .page__subtitle {
grid-area: sub; margin-top: 0; font-size: 12.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-back {
width: 34px; height: 34px; border-radius: 50%;
flex-shrink: 0; align-self: center; margin-right: 2px;
}
.chat-back svg { width: 18px; height: 18px; }
.chat-pane__back { display: none; }
.filters-bar__toggle { display: none; }
.chat-head-avatar {
flex-shrink: 0; align-self: center; display: inline-flex; border-radius: 50%;
transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
a.chat-head-avatar:hover { transform: scale(1.06); box-shadow: var(--ring-soft); }
.chat-head-name { color: inherit; text-decoration: none; }
.chat-head-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.chat-head-name:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.chat-head-avatar__img { width: 34px; height: 34px; font-size: 14px; }
.page:has(> .chat-card) {
height: calc(calc(100vh * var(--vu)) - var(--topbar-h));
height: calc(calc(100dvh * var(--vu)) - var(--topbar-h));
padding-top: 12px; padding-bottom: 16px; gap: 12px;
}
.chat-card { display: flex; flex-direction: column; gap: 18px; padding: 14px; flex: 1 1 auto; min-height: 0; }
.page--reading > * { width: 100%; max-width: 1240px; margin-inline: auto; }
.page:has(> .chat-card) > * { width: 100%; max-width: 1240px; margin-inline: auto; }
.chat-box {
display: flex; flex-direction: column; gap: 3px;
flex: 1 1 auto; min-height: 300px; overflow-y: auto;
padding: 14px 4px 20px 14px; border: 0;
border-radius: var(--radius-md); background: var(--chat-canvas);
overscroll-behavior: contain;
}
.chat-msg { display: flex; padding-right: 10px; }
.chat-msg--own { justify-content: flex-end; }
.chat-box > :first-child { margin-top: auto; }
.chat-box > .chat-empty { margin-block: auto; }
.chat-msg--start { margin-top: 8px; }
.chat-msg:not(.chat-msg--end) .chat-msg__avatar { visibility: hidden; }
.chat-msg:not(.chat-msg--start) .chat-msg__meta { display: none; }
.chat-msg--noauthor .chat-msg__meta { display: none; }
.chat-day {
position: sticky; top: -4px; z-index: 1;
display: flex; justify-content: center; margin: 12px 0 6px;
pointer-events: none;
}
.chat-day.is-covered { visibility: hidden; }
.chat-day__label {
padding: 3px 12px; border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--chat-bubble) 88%, transparent);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border: 0;
font-size: 11.5px; font-weight: 650; color: var(--chat-muted);
white-space: nowrap;
}
@keyframes chat-msg-in {
from { opacity: 0; transform: translateY(14px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg--in { animation: chat-msg-in .3s var(--ease) both; }
.chat-msg__bubble {
position: relative;
max-width: min(78%, 560px);
padding: 9px 15px 8px; border-radius: 21px; margin-bottom: 18px;
background: var(--chat-bubble);
--color-muted: var(--chat-muted);
--color-faint: var(--chat-faint);
--color-primary: var(--chat-accent);
border: 0; box-shadow: var(--chat-bubble-shadow);
}
.chat-msg--end .chat-msg__bubble::after {
content: ""; position: absolute; bottom: 0;
width: 8px; height: 14px;
background: inherit;
clip-path: path("M8 14 L8 0 C8 7 5 11.5 0 14 Z");
display: none;
}
.chat-msg--end:not(.chat-msg--own) .chat-msg__bubble { border-bottom-left-radius: 8px; }
.chat-msg--end:not(.chat-msg--own) .chat-msg__bubble::after { left: -7px; }
.chat-msg--end.chat-msg--own .chat-msg__bubble { border-bottom-right-radius: 8px; }
.chat-msg--end.chat-msg--own .chat-msg__bubble::after { right: -7px; transform: scaleX(-1); }
@supports not (clip-path: path("M0 0 L1 0 Z")) {
.chat-msg--end .chat-msg__bubble::after { display: none; }
.chat-msg--end:not(.chat-msg--own) .chat-msg__bubble { border-bottom-left-radius: 5px; }
.chat-msg--end.chat-msg--own .chat-msg__bubble { border-bottom-right-radius: 5px; }
}
.chat-msg--own .chat-msg__bubble {
background: var(--chat-bubble-own);
--color-muted: var(--chat-muted-own);
--color-faint: var(--chat-faint-own);
--color-primary: var(--chat-accent-own);
}
.chat-msg__meta {
display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px;
font-size: 12px; color: var(--color-muted);
}
.chat-msg__meta strong { color: var(--color-text); font-size: 12.5px; }
.chat-msg__meta--c1 strong, .chat-msg__meta--c1 .chat-msg__author { color: var(--color-primary); }
.chat-msg__meta--c2 strong, .chat-msg__meta--c2 .chat-msg__author { color: var(--color-coral); }
.chat-msg__meta--c3 strong, .chat-msg__meta--c3 .chat-msg__author { color: var(--color-violet); }
.chat-msg__meta--c4 strong, .chat-msg__meta--c4 .chat-msg__author { color: var(--color-cyan); }
.chat-msg__meta--c5 strong, .chat-msg__meta--c5 .chat-msg__author { color: var(--color-success); }
.chat-msg__meta--c6 strong, .chat-msg__meta--c6 .chat-msg__author { color: var(--color-warning); }
.chat-msg__meta--c7 strong, .chat-msg__meta--c7 .chat-msg__author { color: var(--color-magenta); }
html[data-theme="dark"] .chat-msg--own .chat-msg__bubble {
--color-text: #FFFFFF;
color: #FFFFFF;
--chat-panel-ink: #0C0E12;
--chat-panel-ink-mine: #0C0E12;
}
html[data-theme="light"] .chat-msg--own .chat-msg__bubble,
:root:not([data-theme="dark"]) .chat-msg--own .chat-msg__bubble {
--color-coral: #B70C4E;
--color-violet: #5A38D9;
--color-cyan: #0A6474;
--color-success: #076B3D;
--color-warning: #855107;
--color-magenta: #A81E8F;
}
html[data-theme="dark"] .chat-msg--own .chat-msg__bubble {
--color-coral: #FEEDF4;
--color-violet: #F3F0FF;
--color-cyan: #D2F5FA;
--color-success: #C1FBE1;
--color-warning: #FDECD5;
--color-magenta: #FCEDF8;
}
.chat-msg__author:hover { color: inherit; }
.chat-msg__text { display: flow-root; font-size: 15px; line-height: 1.4; word-break: break-word; }
.chat-link {
color: var(--color-primary); overflow-wrap: anywhere;
text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.chat-link:hover { text-decoration-thickness: 2px; }
.chat-link-card {
display: block; margin: 6px 0 2px; overflow: hidden;
width: 300px; max-width: 100%;
border-radius: 12px; border-left: 3px solid var(--color-primary);
background: color-mix(in srgb, var(--chat-panel-ink, var(--color-text)) 6%, transparent);
color: inherit; text-decoration: none;
transition: background-color .15s var(--ease);
}
.chat-link-card:hover { background: color-mix(in srgb, var(--chat-panel-ink-mine, var(--color-primary)) 14%, transparent); }
.chat-link-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.chat-link-card__cover { position: relative; display: block; }
.chat-link-card__cover img {
display: block; width: 100%; max-height: 180px; object-fit: cover;
}
.chat-link-card--video .chat-link-card__cover img { aspect-ratio: 16 / 9; max-height: none; }
.chat-link-card--image .chat-link-card__cover img { max-height: 300px; object-fit: contain; }
.chat-link-card__play {
position: absolute; inset: 0; margin: auto;
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 50%;
background: rgba(8, 10, 14, .62); color: #fff;
transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.chat-link-card__play svg { width: 26px; height: 26px; margin-left: 2px; }
.chat-link-card:hover .chat-link-card__play {
background: rgba(8, 10, 14, .78); transform: scale(1.06);
}
.chat-link-card__body { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px 8px; }
.chat-link-card__site {
font-size: 11.5px; font-weight: 700; color: var(--color-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-link-card__title { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.chat-link-card__text {
font-size: 12.5px; line-height: 1.35; color: var(--color-muted);
display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden;
}
.chat-link-lazy { display: none; }
.chat-msg__reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chat-msg__reacts:empty { display: none; }
.chat-react {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px; border-radius: var(--radius-pill);
border: 1px solid transparent;
background: color-mix(in srgb, var(--chat-panel-ink, var(--color-text)) 8%, transparent);
color: var(--color-text); font: inherit; font-size: 12px; font-weight: 700;
line-height: 1.5; cursor: pointer;
transition: background-color .14s var(--ease), border-color .14s var(--ease),
transform .16s var(--ease-out);
}
.chat-react:hover { background: color-mix(in srgb, var(--chat-panel-ink, var(--color-text)) 14%, transparent); }
.chat-react:active { transform: scale(0.94); }
.chat-react--mine {
background: color-mix(in srgb, var(--chat-panel-ink-mine, var(--color-primary)) 20%, transparent);
border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
color: var(--color-primary);
}
.chat-react--mine:hover { background: color-mix(in srgb, var(--chat-panel-ink-mine, var(--color-primary)) 28%, transparent); }
.chat-react--static { cursor: default; }
.chat-react--static:hover { background: color-mix(in srgb, var(--chat-panel-ink, var(--color-text)) 8%, transparent); }
.chat-react__emoji { font-size: 13px; line-height: 1; }
.chat-react__count { font-variant-numeric: tabular-nums; }
@keyframes chat-react-pop {
0% { transform: scale(0.72); opacity: 0; }
45% { transform: scale(1.1); opacity: 1; }
72% { transform: scale(0.985); }
100% { transform: scale(1); }
}
.chat-react--pop { animation: chat-react-pop .24s cubic-bezier(.22, .7, .3, 1) both; }
@keyframes chat-bubble-cheer {
0% { transform: scale(1); }
30% { transform: scale(1.028); }
55% { transform: scale(0.995); }
78% { transform: scale(1.006); }
100% { transform: scale(1); }
}
.chat-msg__bubble--cheer { animation: chat-bubble-cheer .38s cubic-bezier(.3, .6, .3, 1) both; }
.chat-react-burst {
position: fixed; z-index: 141; pointer-events: none;
width: var(--burst-size, 74px); height: var(--burst-size, 74px);
margin-top: calc(var(--burst-size, 74px) / -2);
margin-left: calc(var(--burst-size, 74px) / -2);
will-change: transform, opacity;
animation:
chat-react-burst-x var(--burst-time, 1.05s) cubic-bezier(.12, .72, .22, 1) both,
chat-react-burst-fade var(--burst-time, 1.05s) linear both;
}
.chat-react-burst__mid {
width: 100%; height: 100%;
will-change: transform;
animation: chat-react-burst-y var(--burst-time, 1.05s) linear both;
}
.chat-react-burst__body {
width: 100%; height: 100%;
will-change: transform;
animation: chat-react-burst-pop var(--burst-time, 1.05s) linear both;
}
.chat-react-burst svg { display: block; width: 100%; height: 100%; }
@keyframes chat-react-burst-x {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(var(--burst-x, 0px), 0, 0); }
}
@keyframes chat-react-burst-y {
0% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.1, .7, .2, 1); }
70% { transform: translate3d(0, var(--burst-y, -78px), 0); animation-timing-function: cubic-bezier(.5, 0, .8, .6); }
100% { transform: translate3d(0, calc(var(--burst-y, -78px) + 14px), 0); }
}
@keyframes chat-react-burst-pop {
0% { transform: scale(0.62) rotate(0deg); animation-timing-function: cubic-bezier(.2, .9, .35, 1.12); }
20% { transform: scale(1.06) rotate(calc(var(--burst-turn, 0deg) * 0.4)); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
100% { transform: scale(0.82) rotate(var(--burst-turn, 0deg)); }
}
@keyframes chat-react-burst-fade {
0% { opacity: 0; }
4% { opacity: 1; }
64% { opacity: 1; }
100% { opacity: 0; }
}
.chat-msg__reacts {
max-height: 120px;
transition: max-height .28s cubic-bezier(.2, .8, .2, 1), opacity .2s var(--ease),
margin-top .28s cubic-bezier(.2, .8, .2, 1);
}
.chat-msg__reacts--enter,
.chat-msg__reacts--leave { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.chat-react--pop, .chat-msg__bubble--cheer { animation: none; }
.chat-react-burst { display: none; }
.chat-msg__reacts { transition: none; }
}
.chat-msg__stamp,
.chat-msg__stamp--inline {
position: absolute; top: calc(100% + 3px); right: 2px; left: auto;
display: flex; align-items: center; justify-content: flex-end; gap: 5px;
float: none; margin: 0; padding: 0;
font-size: 11.5px; line-height: 1.3; color: var(--chat-stamp);
font-variant-numeric: tabular-nums;
}
.chat-msg:not(.chat-msg--own) .chat-msg__stamp {
left: 2px; right: auto; justify-content: flex-start;
}
.chat-msg__time { white-space: nowrap; }
.chat-msg__stamp,
.chat-msg__stamp--inline { white-space: nowrap; }
.chat-msg__stamp > * { flex: 0 0 auto; }
.chat-seen__count { white-space: nowrap; }
.chat-msg__actions {
position: absolute; top: -10px; right: 8px; z-index: 2;
display: flex; align-items: center; gap: 2px; padding: 2px 4px;
border-radius: var(--radius-pill);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
opacity: 0; pointer-events: none;
transition: opacity .15s var(--ease);
}
.chat-msg__actions:focus-within { opacity: 1; pointer-events: auto; }
.chat-msg__delete {
width: 22px; height: 22px; padding: 0;
color: var(--color-faint);
transition: color .15s var(--ease);
}
.chat-msg__delete svg { width: 14px; height: 14px; }
.chat-msg__delete:hover { color: var(--color-danger); }
.chat-msg__forward {
width: 22px; height: 22px; padding: 0;
color: var(--color-faint);
transition: color .15s var(--ease);
}
.chat-msg__forward svg { width: 14px; height: 14px; }
.chat-msg__forward:hover { color: var(--color-primary); }
.chat-msg__fwd {
display: flex; align-items: center; gap: 6px; margin: 0 0 4px;
font-size: 12px; font-weight: 600; color: var(--color-primary);
}
.chat-msg__fwd svg { width: 13px; height: 13px; flex: 0 0 auto; }
.chat-msg__fwd-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.chat-msg__fwd-link:hover { border-bottom-style: solid; }
.chat-msg__quotes { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; }
.chat-msg__quote {
display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%;
padding: 4px 8px; text-align: left; font: inherit; font-size: 12px;
border: 0; border-left: 3px solid var(--color-primary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: color-mix(in srgb, var(--chat-panel-ink, var(--color-text)) 7%, transparent);
color: inherit; cursor: pointer;
transition: background-color .15s var(--ease);
}
.chat-msg__quote:hover { background: color-mix(in srgb, var(--chat-panel-ink-mine, var(--color-primary)) 14%, transparent); }
.chat-msg__quote:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.chat-msg__quote--gone { cursor: default; color: var(--color-muted); font-style: italic; }
.chat-msg__quote-author { font-weight: 600; color: var(--color-primary); }
.chat-msg__quote-author,
.chat-msg__quote-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-msg__quote-text { color: var(--color-muted); }
.chat-msg--found .chat-msg__bubble {
animation: chat-msg-found 1.2s var(--ease);
}
@keyframes chat-msg-found {
0%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 45%, transparent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
.chat-msg--found .chat-msg__bubble { animation: none; }
}
.chat-select-mode .chat-box { user-select: none; }
.chat-select-mode .chat-msg[data-msg-id] .chat-msg__bubble { cursor: pointer; }
.chat-select-mode .chat-box > .chat-msg[data-msg-id] {
position: relative;
padding-right: 46px;
border-radius: var(--radius-md);
transition: background-color .16s var(--ease);
}
.chat-select-mode .chat-box > .chat-msg[data-msg-id]::before {
content: ""; position: absolute; right: 12px; top: 50%; margin-top: -20px;
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--color-border-strong); background: var(--chat-canvas);
transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.chat-msg--selected { background: color-mix(in srgb, var(--color-primary) 13%, transparent); }
.chat-select-mode .chat-box > .chat-msg--selected[data-msg-id]::before {
background: var(--color-primary); border-color: var(--color-primary);
}
.chat-select-mode .chat-box > .chat-msg--selected[data-msg-id]::after {
content: ""; position: absolute; right: 20px; top: 50%; margin-top: -6px;
width: 6px; height: 10px;
border: solid var(--color-on-primary); border-width: 0 2px 2px 0;
transform: rotate(43deg);
}
.chat-select-bar {
position: fixed; left: 50%; bottom: 22px; z-index: 125;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-pop);
opacity: 0; transform: translateX(-50%) translateY(8px);
transition: opacity .16s var(--ease), transform .18s var(--ease-out);
}
.chat-select-bar.is-open { opacity: 1; transform: translateX(-50%); }
.chat-select-bar[hidden] { display: none; }
html.chat-fwd-open .chat-select-bar.is-open { opacity: 0; pointer-events: none; }
.chat-select-bar__count { font-size: 13px; font-weight: 700; white-space: nowrap; }
.chat-select-bar__note { font-size: 12px; color: var(--color-muted); white-space: nowrap; }
.chat-select-bar__note[hidden] { display: none; }
.chat-select-bar .btn[hidden] { display: none; }
.chat-msg__author { color: inherit; text-decoration: none; }
.chat-msg__author:hover { color: var(--color-primary); text-decoration: underline; }
.chat-msg-menu {
position: fixed; z-index: 130; min-width: 236px; max-width: 320px; padding: 6px;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
transform-origin: left top;
opacity: 0; transform: scale(0.92) translateY(4px);
transition: opacity .13s var(--ease), transform .18s var(--ease-out);
}
.chat-msg-menu.is-open { opacity: 1; transform: none; }
.chat-msg-menu[hidden] { display: none; }
.chat-msg-menu:focus { outline: none; }
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
.chat-msg-menu {
background: color-mix(in srgb, var(--color-surface) 88%, transparent);
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
}
}
.chat-msg-menu__item {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 9px 12px; border: 0; border-radius: var(--radius-md);
background: transparent; color: var(--color-text); text-align: left;
font-family: inherit; font-size: 14px; font-weight: 550; line-height: 1.3;
cursor: pointer; text-decoration: none;
transition: background-color .12s var(--ease), color .12s var(--ease);
}
.chat-msg-menu__item:hover,
.chat-msg-menu__item:focus-visible { background: var(--color-surface-soft); outline: none; }
.chat-msg-menu__item svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-muted); }
.chat-msg-menu__item:hover svg,
.chat-msg-menu__item:focus-visible svg { color: var(--color-text); }
.chat-msg-menu__label { flex: 1 1 auto; }
.chat-msg-menu__item .chat-msg-menu__more { width: 14px; height: 14px; color: var(--color-faint); }
.chat-msg-menu__item--danger { color: var(--color-danger); }
.chat-msg-menu__item--danger svg,
.chat-msg-menu__item--danger:hover svg,
.chat-msg-menu__item--danger:focus-visible svg { color: var(--color-danger); }
.chat-msg-menu__item--danger:hover,
.chat-msg-menu__item--danger:focus-visible { background: var(--color-danger-soft); color: var(--color-danger); }
.chat-msg-menu__sep { height: 1px; margin: 5px 10px; background: var(--color-border); }
.chat-msg-menu__reacts {
display: flex; align-items: center; gap: 2px;
padding: 2px 2px 6px; margin-bottom: 2px;
border-bottom: 1px solid var(--color-border);
}
.chat-msg-menu__react {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
background: transparent; font-size: 19px; line-height: 1; cursor: pointer;
transition: background-color .12s var(--ease), transform .16s var(--ease-out);
}
.chat-msg-menu__react:hover,
.chat-msg-menu__react:focus-visible {
background: var(--color-surface-soft); outline: none; transform: scale(1.18);
}
.chat-msg-menu__react--mine {
background: color-mix(in srgb, var(--color-primary) 20%, transparent);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.chat-msg__bubble { cursor: default; }
.chat-msg--actionable .chat-msg__bubble { cursor: context-menu; }
.chat-msg__text { cursor: text; }
.chat-feed-host { position: relative; }
.chat-jump {
position: absolute; z-index: 6;
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; padding: 0;
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
background: var(--color-surface); color: var(--color-muted);
box-shadow: var(--shadow-pop); cursor: pointer;
opacity: 0; transform: translateY(10px) scale(0.94);
transition: opacity .18s var(--ease), transform .22s var(--ease-out),
color .15s var(--ease), border-color .15s var(--ease);
}
.chat-jump[hidden] { display: none; }
.chat-jump.is-visible { opacity: 1; transform: none; }
.chat-jump:hover {
color: var(--color-primary);
border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}
.chat-jump:active { transform: translateY(1px) scale(0.97); }
.chat-jump svg { width: 19px; height: 19px; }
.chat-jump__count {
position: absolute; top: -5px; right: -5px;
display: inline-flex; align-items: center; justify-content: center;
min-width: 19px; height: 19px; padding: 0 5px;
border-radius: var(--radius-pill); background: var(--color-coral); color: #fff;
font-size: 11px; font-weight: 800; line-height: 1;
box-shadow: 0 0 0 2px var(--color-surface);
}
.chat-jump__count[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.chat-jump { transform: none; transition: opacity .12s linear; }
.chat-jump:active { transform: none; }
}
.chat-msg__files { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; }
.chat-msg__file {
display: flex; align-items: center; gap: 8px; max-width: 320px;
padding: 8px 10px; border-radius: 10px; text-decoration: none;
border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
background: color-mix(in srgb, var(--chat-panel-ink, var(--color-text)) 8%, transparent);
color: var(--color-text);
transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.chat-msg__file:hover {
border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
background: color-mix(in srgb, var(--chat-panel-ink-mine, var(--color-primary)) 16%, transparent);
}
.chat-msg__file svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-primary); }
.chat-msg__file-name {
font-size: 13px; font-weight: 550; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-msg__file-size { font-size: 11.5px; color: var(--color-muted); flex: 0 0 auto; }
.chat-msg__video-open { display: block; position: relative; cursor: pointer; }
.chat-msg__video-el {
display: block; width: auto; height: auto; background: #000;
pointer-events: none;
}
.chat-msg__video-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 50%;
background: rgba(8, 10, 14, .55); box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
pointer-events: none;
transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.chat-msg__video-play::after {
content: ""; margin-left: 4px; width: 0; height: 0;
border-left: 18px solid rgba(255, 255, 255, .96);
border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.chat-msg__video-open:hover .chat-msg__video-play {
background: rgba(8, 10, 14, .72); transform: translate(-50%, -50%) scale(1.06);
}
.chat-msg__video-time {
position: absolute; top: 8px; left: 8px;
padding: 2px 7px; border-radius: var(--radius-pill);
background: rgba(8, 10, 14, .62); color: #fff;
font-size: 11.5px; font-weight: 650; line-height: 1.5;
pointer-events: none;
}
.chat-msg__video-time[hidden] { display: none; }
.chat-msg__video.is-broken .chat-msg__video-open { display: none; }
.chat-msg__album:has(> .chat-msg__tile:nth-child(2)) > .chat-msg__video.is-broken {
grid-column: 1 / -1; display: flex; align-items: center;
}
.chat-msg__video-fallback[hidden] { display: none; }
.chat-msg__status { display: inline-flex; align-items: center; gap: 4px; align-self: center; color: var(--chat-stamp); }
.chat-msg__status svg { width: 15px; height: 15px; flex: 0 0 auto; }
.chat-msg__status--read { color: var(--chat-stamp-read); }
.chat-msg__read-note { font-size: 11px; line-height: 1; white-space: nowrap; }
.chat-seen { position: relative; display: inline-flex; align-self: center; }
.chat-seen > summary {
cursor: pointer; list-style: none;
border-radius: var(--radius-pill);
transition: background-color .14s var(--ease);
}
.chat-seen > summary::-webkit-details-marker { display: none; }
.chat-seen > summary::marker { content: ""; }
.chat-seen > summary:hover { background: color-mix(in srgb, var(--chat-stamp) 16%, transparent); }
.chat-seen > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.chat-seen__count { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chat-seen__pop {
position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 6;
min-width: 190px; max-width: min(260px, 72vw);
max-height: 260px; overflow-y: auto;
padding: 8px; border-radius: var(--radius-md);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-pop);
color: var(--color-text); text-align: left;
--color-muted: var(--chat-stamp);
--color-faint: var(--chat-stamp);
}
.chat-seen__title {
font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
color: var(--chat-stamp-read); padding: 2px 4px 4px;
}
.chat-seen__title--wait { color: var(--color-faint); padding-top: 8px; }
.chat-seen__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-seen__row {
display: flex; align-items: center; gap: 7px; min-width: 0;
padding: 3px 4px; border-radius: 8px;
}
.chat-seen__list--wait .chat-seen__row { color: var(--color-muted); }
.chat-seen__name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-seen__row .chat-seen__ava {
width: 22px; height: 22px; flex: 0 0 22px; font-size: 10px; font-weight: 700;
background: color-mix(in srgb, var(--color-text) 16%, transparent);
color: var(--color-text);
}
.chat-msg__album {
display: grid; gap: 3px; margin: 2px 0 6px;
width: fit-content; max-width: 320px;
border-radius: 14px; overflow: hidden;
}
.chat-msg__tile { display: block; position: relative; min-width: 0; min-height: 0; }
.chat-msg__image { cursor: zoom-in; }
.chat-msg__image img { display: block; }
.chat-msg__album > .chat-msg__tile > img,
.chat-msg__album > .chat-msg__tile .chat-msg__video-el {
max-width: 100%; max-height: 300px; width: auto; height: auto;
}
.chat-msg__image::after,
.chat-msg__video-open::after {
content: ""; position: absolute; inset: 0;
background: rgba(8, 10, 14, 0); pointer-events: none;
transition: background-color .16s var(--ease);
}
.chat-msg__image:hover::after { background: rgba(8, 10, 14, .2); }
.chat-msg__video-open:hover::after { background: rgba(8, 10, 14, .18); }
.chat-msg__image:focus-visible,
.chat-msg__video-open:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.chat-msg__album:has(> .chat-msg__tile:nth-child(2)) {
width: 272px; max-width: 100%;
grid-template-columns: 1fr 1fr; grid-auto-rows: 128px;
}
.chat-msg__album:has(> .chat-msg__tile:nth-child(2)) > .chat-msg__tile { overflow: hidden; }
.chat-msg__album:has(> .chat-msg__tile:nth-child(2)) .chat-msg__video-open { position: absolute; inset: 0; }
.chat-msg__album:has(> .chat-msg__tile:nth-child(2)) > .chat-msg__tile > img,
.chat-msg__album:has(> .chat-msg__tile:nth-child(2)) .chat-msg__video-el {
position: absolute; inset: 0; width: 100%; height: 100%;
max-width: none; max-height: none; object-fit: cover;
}
.chat-msg__album:has(> .chat-msg__tile:nth-child(2)) .chat-msg__video-play { width: 42px; height: 42px; }
.chat-msg__album:has(> .chat-msg__tile:nth-child(2)) .chat-msg__video-play::after {
margin-left: 3px;
border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px;
}
.chat-msg__album:has(> .chat-msg__tile:nth-child(2)) .chat-msg__video-time {
top: 5px; left: 5px; padding: 1px 5px; font-size: 10.5px;
}
.chat-msg__album:has(> .chat-msg__tile:nth-child(3)):not(:has(> .chat-msg__tile:nth-child(4))) {
grid-template-columns: 1.6fr 1fr; grid-auto-rows: 85px;
}
.chat-msg__album:has(> .chat-msg__tile:nth-child(3)):not(:has(> .chat-msg__tile:nth-child(4))) > .chat-msg__tile:first-child {
grid-row: span 2;
}
.chat-msg__album:has(> .chat-msg__tile:nth-child(5)) {
grid-template-columns: repeat(6, 1fr); grid-auto-rows: 88px;
}
.chat-msg__album:has(> .chat-msg__tile:nth-child(5)) > .chat-msg__tile { grid-column: span 2; }
.chat-msg__album:has(> .chat-msg__tile:nth-child(5)) .chat-msg__video-play { width: 34px; height: 34px; }
.chat-msg__album:has(> .chat-msg__tile:nth-child(5)) .chat-msg__video-play::after {
margin-left: 2px;
border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px;
}
.chat-msg__album:has(> .chat-msg__tile:nth-child(5)) > .chat-msg__tile:last-child:nth-child(3n + 1) { grid-column: span 6; }
.chat-msg__album:has(> .chat-msg__tile:nth-child(5)) > .chat-msg__tile:nth-last-child(2):nth-child(3n + 1),
.chat-msg__album:has(> .chat-msg__tile:nth-child(5)) > .chat-msg__tile:last-child:nth-child(3n + 2) { grid-column: span 3; }
.chat-empty { display: grid; place-items: center; min-height: 180px; }
.chat-thread__archived { font-size: 11px; font-weight: 700; color: var(--color-muted); white-space: nowrap; }
.chat-form { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.chat-form__row { display: flex; gap: 10px; align-items: flex-end; }
textarea.chat-form__input {
flex: 1 1 auto; resize: none;
min-height: 44px; max-height: 168px; overflow-y: hidden;
font-family: inherit; line-height: 1.45; border-radius: 20px;
transition: height .2s var(--ease), border-color .18s var(--ease),
box-shadow .22s var(--ease), background-color .18s var(--ease);
}
.chat-form__tools { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
html[data-theme="dark"] .btn-primary.chat-send { background: var(--chat-bubble-own); }
.chat-send { display: inline-flex; align-items: center; gap: 8px; }
.chat-search-toggle { display: none; }
.chat-send__icon { display: none; width: 18px; height: 18px; flex: 0 0 auto; }
@media (min-width: 820px) {
.chat-form__row {
gap: 6px; align-items: center;
padding: 5px 6px 5px 12px; border-radius: 28px;
border: 1px solid var(--color-border); background: var(--color-surface-alt);
transition: border-color .18s var(--ease), box-shadow .22s var(--ease);
}
.chat-form__row:focus-within { border-color: var(--color-primary); box-shadow: var(--ring-soft); }
textarea.chat-form__input {
min-height: 36px; padding: 8px 2px; border-radius: 0;
border: 0; background: transparent;
}
textarea.chat-form__input:hover,
textarea.chat-form__input:focus { border: 0; background: transparent; box-shadow: none; }
.chat-form__row .btn-icon { border-color: transparent; background: transparent; }
.chat-form__row .btn-icon:hover {
border-color: transparent; background: var(--color-surface-soft); transform: none;
}
.chat-send {
width: 42px; height: 42px; min-height: 42px; padding: 0;
border-radius: 50%; flex: 0 0 auto; justify-content: center;
}
.chat-send__icon { display: block; width: 18px; height: 18px; }
.chat-send__label {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
}
.chat-unread-badge[hidden] { display: none; }
.notif-unread-badge[hidden] { display: none; }
.topbar__bell-count[hidden] { display: none; }
.xchg-claims-badge[hidden] { display: none; }
.xchg-free-badge[hidden] { display: none; }
.ext-update-badge[hidden] { display: none; }
.chat-attach { color: var(--color-muted); flex: 0 0 auto; }
@keyframes chat-attach-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.chat-attach-preview {
position: relative;
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--radius-lg);
border: 1px solid var(--color-border); background: var(--color-surface-soft);
animation: chat-attach-in .2s var(--ease) both;
transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.chat-attach-preview[hidden] { display: none; }
@keyframes chat-attach-pop {
from { opacity: 0; transform: translateY(9px) scale(.86); }
to { opacity: 1; transform: none; }
}
.chat-attach-thumb {
position: relative;
animation: chat-attach-pop .24s var(--ease) both;
animation-delay: calc(var(--i, 0) * 35ms);
}
.chat-attach-thumb img {
display: block; width: 56px; height: 56px; object-fit: cover;
border-radius: 10px; border: 1px solid var(--color-border);
}
.chat-attach-thumb__clear {
position: absolute; top: -7px; right: -7px;
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border: 0; border-radius: 50%;
background: var(--color-text); color: var(--color-surface);
font-size: 13px; line-height: 1; cursor: pointer;
box-shadow: var(--shadow-sm);
transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.chat-attach-thumb__clear:hover { background: var(--color-danger); color: #fff; transform: scale(1.1); }
.chat-attach-thumb--video video {
display: block; width: 56px; height: 56px; object-fit: cover;
border-radius: 10px; border: 1px solid var(--color-border); background: #000;
}
.chat-attach-thumb__play {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.chat-attach-thumb__play::after {
content: ""; width: 0; height: 0;
border-left: 11px solid rgba(255, 255, 255, .95);
border-top: 7px solid transparent; border-bottom: 7px solid transparent;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.chat-attach-doc {
position: relative; display: flex; align-items: center; gap: 7px;
max-width: 220px; height: 56px; padding: 0 12px 0 8px;
border-radius: 10px; border: 1px solid var(--color-border);
background: var(--color-surface);
animation: chat-attach-pop .24s var(--ease) both;
animation-delay: calc(var(--i, 0) * 35ms);
}
.chat-attach-doc__ext {
flex: 0 0 auto; padding: 3px 6px; border-radius: 6px;
background: var(--color-primary-soft); color: var(--color-primary-dark);
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.chat-attach-doc__name {
min-width: 0; font-size: 12.5px; font-weight: 550;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-attach-preview.is-uploading {
border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-soft));
}
@property --upload-p { syntax: "<number>"; inherits: true; initial-value: 0; }
.chat-attach-preview { transition: --upload-p .35s var(--ease); }
.chat-attach-preview.is-uploading .chat-attach-thumb::after,
.chat-attach-preview.is-uploading .chat-attach-doc::after {
content: ""; position: absolute; z-index: 2; pointer-events: none;
left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
border-radius: 50%;
--ring: #fff; --ring-track: rgba(255, 255, 255, .3);
background: conic-gradient(var(--ring) calc(var(--upload-p, 0) * 1turn), var(--ring-track) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
animation: chat-upload-ring-in .22s var(--ease) both;
}
.chat-attach-preview.is-uploading .chat-attach-doc::after {
left: auto; right: 12px; margin-left: 0;
--ring: var(--color-primary);
--ring-track: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.chat-attach-preview.is-indeterminate .chat-attach-thumb::after,
.chat-attach-preview.is-indeterminate .chat-attach-doc::after {
background: conic-gradient(var(--ring) .28turn, var(--ring-track) 0);
animation: chat-upload-fade .22s var(--ease) both, chat-upload-spin .9s linear infinite;
}
@keyframes chat-upload-ring-in {
from { opacity: 0; transform: scale(.6); }
to { opacity: 1; transform: none; }
}
@keyframes chat-upload-fade { from { opacity: 0; } }
@keyframes chat-upload-spin { to { transform: rotate(1turn); } }
.chat-attach-preview.is-uploading .chat-attach-thumb__clear,
.chat-attach-preview.is-uploading .chat-attach-thumb__play { opacity: 0; pointer-events: none; }
.chat-attach-thumb img,
.chat-attach-thumb--video video { transition: filter .2s var(--ease); }
.chat-attach-preview.is-uploading .chat-attach-thumb img,
.chat-attach-preview.is-uploading .chat-attach-thumb--video video { filter: brightness(.62); }
@keyframes chat-attach-fly {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(-26px) scale(.68); }
}
.chat-attach-preview.is-sent .chat-attach-thumb,
.chat-attach-preview.is-sent .chat-attach-doc {
animation: chat-attach-fly .3s var(--ease) both;
animation-delay: calc(var(--i, 0) * 45ms);
}
.chat-attach-preview.is-sent .chat-attach-thumb::after,
.chat-attach-preview.is-sent .chat-attach-doc::after { animation: none; opacity: 1; }
@keyframes chat-attach-shake {
0%, 100% { transform: none; }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.chat-attach-preview.is-failed {
animation: chat-attach-shake .32s var(--ease) both;
border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-border));
}
@media (prefers-reduced-motion: reduce) {
.chat-attach-thumb,
.chat-attach-doc,
.chat-attach-preview.is-uploading .chat-attach-thumb::after,
.chat-attach-preview.is-uploading .chat-attach-doc::after,
.chat-attach-preview.is-failed { animation: none; }
.chat-attach-preview.is-sent .chat-attach-thumb,
.chat-attach-preview.is-sent .chat-attach-doc { animation: none; opacity: .35; }
.avatar-card__ring.is-fresh { animation: none; }
}
.chat-card { position: relative; }
.chat-card.is-dragover::after {
content: "Отпустите, чтобы прикрепить файл";
position: absolute; inset: 6px; z-index: 50;
display: flex; align-items: center; justify-content: center;
border: 2px dashed var(--color-primary); border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
backdrop-filter: blur(2px);
color: var(--color-primary-dark); font-weight: 650; font-size: 14.5px;
pointer-events: none;
animation: chat-attach-in .15s var(--ease) both;
}
.chat-emoji { position: relative; flex: 0 0 auto; }
.chat-emoji__toggle { color: var(--color-muted); }
.chat-emoji__toggle[aria-expanded="true"] { color: var(--color-primary-dark); background: var(--color-primary-soft); }
.chat-emoji__pop {
position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 60;
display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; padding: 8px;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
}
.chat-emoji__pop[hidden] { display: none; }
.chat-form__row > .chat-emoji .chat-emoji__pop { left: 0; right: auto; }
.chat-emoji__item {
width: 34px; height: 34px; border: 0; border-radius: var(--radius-md);
background: transparent; font-size: 19px; line-height: 1; cursor: pointer;
}
.chat-emoji__item:hover { background: var(--color-surface-soft); }
.imgview {
position: fixed; inset: 0; z-index: 140;
--imgview-dim: 1;
background: rgba(8, 10, 14, 0);
transition: background-color .28s var(--ease), backdrop-filter .28s var(--ease);
overscroll-behavior: contain;
}
.imgview[hidden] { display: none; }
.imgview.is-open {
background: rgba(8, 10, 14, calc(.88 * var(--imgview-dim, 1)));
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
}
body.is-imgview-open { overflow: hidden; }
.imgview__stage {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: calc(64px + max(env(safe-area-inset-top), env(safe-area-inset-bottom)))
max(clamp(14px, calc(3.4vw * var(--vu)), 34px),
env(safe-area-inset-left), env(safe-area-inset-right));
overflow: hidden;
touch-action: none;
opacity: 0; transform: scale(.94);
transition: opacity .24s var(--ease), transform .3s var(--ease-out);
}
.imgview.is-open .imgview__stage { opacity: 1; transform: none; }
.imgview--album .imgview__stage {
padding-block: calc(124px + max(env(safe-area-inset-top), env(safe-area-inset-bottom)));
}
.imgview__img {
display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
border-radius: 8px; box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
transform-origin: 50% 50%;
transition: transform .26s var(--ease-out);
will-change: transform;
-webkit-user-select: none; user-select: none;
}
.imgview__img--in { animation: imgview-fade .26s var(--ease) both; }
@keyframes imgview-fade { from { opacity: 0; } to { opacity: 1; } }
.imgview__video {
display: block; max-width: 100%; max-height: 100%;
border-radius: 8px; background: #000;
box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
.imgview__video[hidden], .imgview__img[hidden] { display: none; }
.imgview--video .imgview__zoombar { display: none; }
.imgview--video .imgview__stage { cursor: default; touch-action: auto; }
.imgview:not(.is-zoomed) .imgview__img { cursor: zoom-in; }
.imgview.is-zoomed .imgview__stage { cursor: grab; }
.imgview.is-zoomed .imgview__stage:active { cursor: grabbing; }
.imgview__spin {
position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
margin: -17px 0 0 -17px; border-radius: 50%;
border: 3px solid rgba(255, 255, 255, .22); border-top-color: #fff;
opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.imgview.is-loading .imgview__spin { opacity: 1; animation: imgview-spin .8s linear infinite; }
@keyframes imgview-spin { to { transform: rotate(360deg); } }
.imgview__top {
position: absolute; top: 0; left: 0; right: 0; z-index: 2;
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: calc(13px + env(safe-area-inset-top)) max(15px, env(safe-area-inset-right))
34px max(15px, env(safe-area-inset-left));
color: #fff; pointer-events: none;
background: linear-gradient(180deg, rgba(6, 8, 12, .6), rgba(6, 8, 12, 0));
opacity: 0; transform: translateY(-10px);
transition: opacity .3s var(--ease) .06s, transform .34s var(--ease-out) .06s;
}
.imgview.is-open .imgview__top { opacity: 1; transform: none; }
.imgview__top > * { pointer-events: auto; }
.imgview__title {
display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 4px 0 8px;
text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.imgview__count { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.imgview__cap {
font-size: 12px; color: rgba(255, 255, 255, .74);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imgview__count[hidden], .imgview__cap[hidden] { display: none; }
.imgview__tools {
display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
padding: 4px; border-radius: 999px;
background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.imgview__btn {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0;
border: 1px solid transparent; border-radius: 50%;
background: transparent; color: #fff; cursor: pointer; text-decoration: none;
transition: background-color .15s var(--ease), transform .15s var(--ease), opacity .15s var(--ease);
}
.imgview__btn svg { width: 18px; height: 18px; }
.imgview__extras { display: flex; align-items: center; gap: 2px; }
.imgview__extras:not(:empty) { padding-right: 4px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, .18); }
.imgview__btn--danger:hover { color: var(--color-danger); }
.imgview__btn[hidden] { display: none; }
.imgview__btn:hover { background: rgba(255, 255, 255, .18); }
.imgview__btn:active { transform: scale(.94); }
.imgview__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.imgview__btn[disabled] { opacity: .32; cursor: default; }
.imgview__btn[disabled]:hover { background: transparent; }
.imgview__btn--close:hover { background: rgba(255, 255, 255, .26); }
.imgview__zoom {
min-width: 58px; height: 34px; padding: 0 8px;
border: 1px solid transparent; border-radius: 999px;
background: transparent; color: #fff; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
transition: background-color .15s var(--ease);
}
.imgview__zoom:hover { background: rgba(255, 255, 255, .18); }
.imgview__zoom:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.imgview__sep { width: 1px; height: 20px; margin: 0 4px; background: rgba(255, 255, 255, .22); }
.imgview__zoombar {
position: absolute; left: 50%; z-index: 1;
bottom: calc(14px + env(safe-area-inset-bottom));
display: flex; align-items: center; gap: 2px;
padding: 4px; border-radius: 999px; color: #fff;
background: rgba(12, 15, 20, .66); border: 1px solid rgba(255, 255, 255, .16);
backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
opacity: 0; transform: translate(-50%, 12px);
transition: opacity .3s var(--ease) .06s, transform .34s var(--ease-out) .06s;
}
.imgview.is-open .imgview__zoombar { opacity: 1; transform: translate(-50%, 0); }
.imgview--album .imgview__zoombar { bottom: calc(78px + env(safe-area-inset-bottom)); }
.imgview__range {
-webkit-appearance: none; appearance: none;
flex: 0 1 auto; width: 168px; min-width: 72px; height: 20px; margin: 0 6px;
background: transparent; cursor: pointer;
}
.imgview__range::-webkit-slider-runnable-track {
height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .3);
}
.imgview__range::-moz-range-track {
height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .3);
}
.imgview__range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 14px; height: 14px; margin-top: -5px;
border: none; border-radius: 50%; background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.imgview__range::-moz-range-thumb {
width: 14px; height: 14px;
border: none; border-radius: 50%; background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.imgview__range:hover::-webkit-slider-thumb { transform: scale(1.16); }
.imgview__range:hover::-moz-range-thumb { transform: scale(1.16); }
.imgview__range:focus-visible { outline: none; }
.imgview__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); }
.imgview__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); }
.imgview__nav {
position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; padding: 0;
border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%;
background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity .25s var(--ease), background-color .15s var(--ease), transform .18s var(--ease);
}
.imgview__nav[hidden] { display: none; }
.imgview__nav svg { width: 22px; height: 22px; }
.imgview__nav--prev { left: 16px; }
.imgview__nav--next { right: 16px; }
.imgview.is-open .imgview__nav { opacity: 1; }
.imgview.is-open .imgview__nav[disabled] { opacity: 0; pointer-events: none; }
.imgview__nav:hover { background: rgba(255, 255, 255, .22); }
.imgview__nav:active { transform: translateY(-50%) scale(.94); }
.imgview__nav:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.imgview__thumbs {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 34px max(16px, env(safe-area-inset-right)) calc(15px + env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
overflow-x: auto; overscroll-behavior-x: contain;
scrollbar-width: none;
background: linear-gradient(0deg, rgba(6, 8, 12, .6), rgba(6, 8, 12, 0));
opacity: 0; transform: translateY(12px);
transition: opacity .3s var(--ease) .06s, transform .34s var(--ease-out) .06s;
}
.imgview__thumbs::-webkit-scrollbar { display: none; }
.imgview__thumbs[hidden] { display: none; }
.imgview.is-open .imgview__thumbs { opacity: 1; transform: none; }
.imgview__thumb {
flex: 0 0 auto; width: 54px; height: 54px; padding: 0;
border: 1px solid transparent; border-radius: 10px; overflow: hidden;
background: rgba(255, 255, 255, .1); cursor: pointer; opacity: .55;
transition: opacity .16s var(--ease), transform .16s var(--ease), border-color .16s var(--ease);
}
.imgview__thumb img,
.imgview__thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.imgview__thumb--video { position: relative; }
.imgview__thumb--video::after {
content: ""; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 0; height: 0; border-left: 11px solid rgba(255, 255, 255, .95);
border-top: 7px solid transparent; border-bottom: 7px solid transparent;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7));
}
.imgview__thumb:hover { opacity: .85; }
.imgview__thumb.is-active { opacity: 1; border-color: #fff; transform: translateY(-2px); }
.imgview__thumb:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
@media (max-width: 819px) {
.imgview__stage {
padding: calc(66px + max(env(safe-area-inset-top), env(safe-area-inset-bottom)))
max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
}
.imgview--album .imgview__stage {
padding-block: calc(141px + max(env(safe-area-inset-top), env(safe-area-inset-bottom)));
}
.imgview__top {
padding: calc(10px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
26px max(10px, env(safe-area-inset-left));
}
.imgview__zoombar {
bottom: calc(10px + env(safe-area-inset-bottom)); padding: 3px; gap: 0;
max-width: calc(100vw - 16px);
}
.imgview--album .imgview__zoombar { bottom: calc(85px + env(safe-area-inset-bottom)); }
.imgview__zoombar .imgview__zoom { min-width: 50px; padding: 0 6px; }
.imgview__sep { margin: 0 2px; }
.imgview__range { width: 96px; margin: 0 4px; }
.imgview__title { padding: 8px 2px 0 6px; }
.imgview__cap { display: none; }
.imgview__nav { display: none; }
.imgview__thumbs {
justify-content: flex-start; gap: 6px;
padding: 20px max(10px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom))
max(10px, env(safe-area-inset-left));
}
}
@media (max-width: 819px) and (max-height: 520px) {
.imgview__thumbs { display: none; }
.imgview--album .imgview__zoombar { bottom: calc(10px + env(safe-area-inset-bottom)); }
.imgview--album .imgview__stage {
padding-block: calc(66px + max(env(safe-area-inset-top), env(safe-area-inset-bottom)));
}
}
@media (pointer: coarse) {
.imgview__btn { width: 44px; height: 44px; }
.imgview__btn svg { width: 21px; height: 21px; }
.imgview__tools { padding: 3px; }
.imgview__zoom { min-width: 62px; height: 44px; }
.imgview__btn--close { background: rgba(255, 255, 255, .2); }
.imgview__thumb { width: 52px; height: 52px; }
}
.imgview__vguard {
position: absolute; z-index: 1;
touch-action: none; background: transparent;
}
.imgview__vguard[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.imgview, .imgview__stage, .imgview__top, .imgview__thumbs, .imgview__zoombar,
.imgview__img, .imgview__nav, .imgview__thumb { transition-duration: .01ms; }
.imgview__img--in { animation: none; }
.imgview.is-loading .imgview__spin { animation-duration: 2.4s; }
}
.chat-poll { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; }
.chat-poll__question { font-weight: 700; line-height: 1.35; }
.chat-poll__note { font-size: 11.5px; color: var(--color-muted); }
.chat-poll__opts { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.chat-poll__item {
position: relative; isolation: isolate; overflow: hidden;
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface);
transition: border-color .12s var(--ease);
}
.chat-poll__item.is-live:hover { border-color: var(--color-primary); }
.chat-poll__item.is-mine { border-color: var(--color-primary); }
.chat-poll__opt {
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: 8px; width: 100%; padding: 7px 10px; text-align: left;
border: 0; border-radius: inherit; background: transparent; color: inherit;
cursor: pointer; font: inherit; font-size: 13px;
}
.chat-poll__opt:disabled { cursor: default; }
.chat-poll__bar {
position: absolute; inset: 0 auto 0 0; z-index: -1;
background: var(--color-primary-soft);
transition: width .25s var(--ease-out);
}
.chat-poll__mark {
display: grid; place-items: center; width: 17px; height: 17px; flex: 0 0 auto;
border: 1.5px solid var(--color-border); border-radius: 50%; color: transparent;
}
.chat-poll__mark--box { border-radius: 5px; }
.chat-poll__mark svg { width: 11px; height: 11px; }
.chat-poll__item.is-mine .chat-poll__mark {
background: var(--color-primary); border-color: var(--color-primary);
color: var(--color-on-primary);
}
.chat-msg--own .chat-poll__item.is-mine .chat-poll__mark { color: var(--chat-bubble-own); }
.chat-msg--own .chat-poll__item {
background: color-mix(in srgb, var(--chat-panel-ink, var(--color-text)) 16%, transparent);
border-color: color-mix(in srgb, var(--color-text) 34%, transparent);
}
.chat-msg--own .chat-poll__bar { background: color-mix(in srgb, var(--chat-panel-ink, var(--color-text)) 24%, transparent); }
.chat-msg--own .chat-poll__item.is-live:hover,
.chat-msg--own .chat-poll__item.is-mine { border-color: var(--color-primary); }
.chat-poll__label { min-width: 0; word-break: break-word; }
.chat-poll__share { font-size: 12px; font-weight: 700; white-space: nowrap; }
.chat-poll__count { color: var(--color-muted); font-weight: 600; }
.chat-poll__voters {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
padding: 0 10px 7px 35px;
}
.chat-poll__voter {
display: inline-flex; align-items: center; gap: 5px; min-width: 0;
font-size: 11.5px; line-height: 1.2; color: var(--color-muted);
}
.chat-poll__voter .chat-poll__ava {
width: 18px; height: 18px; font-size: 9.5px; font-weight: 700;
}
.chat-msg--own .chat-poll__voter .chat-poll__ava { color: var(--chat-bubble-own); }
.chat-poll__voter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-poll__voter[hidden] { display: none; }
.chat-poll__more {
border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px;
font-weight: 700; color: var(--color-primary); cursor: pointer;
}
.chat-poll__more:hover { text-decoration: underline; }
.chat-poll__foot {
display: flex; align-items: center; gap: 8px;
font-size: 11.5px; color: var(--color-muted);
}
.chat-poll__total { margin-right: auto; }
.chat-poll--closed .chat-poll__question { opacity: .85; }
.chat-pollnew {
position: fixed; inset: 0; z-index: 128;
display: grid; place-items: center; padding: 24px;
background: rgba(7, 17, 31, 0);
transition: background-color .16s var(--ease);
}
.chat-pollnew[hidden] { display: none; }
.chat-pollnew.is-open { background: rgba(7, 17, 31, 0.62); }
.chat-pollnew__panel {
display: flex; flex-direction: column; gap: 12px;
width: min(460px, 100%); max-height: min(620px, calc(88vh * var(--vu)));
overflow-y: auto; padding: 16px;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
opacity: 0; transform: translateY(12px) scale(0.98);
transition: opacity .16s var(--ease), transform .18s var(--ease-out);
}
.chat-pollnew.is-open .chat-pollnew__panel { opacity: 1; transform: none; }
.chat-pollnew__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-pollnew__title { font-size: 15px; font-weight: 800; }
.chat-pollnew__close { width: 28px; height: 28px; color: var(--color-muted); }
.chat-pollnew__close svg { width: 16px; height: 16px; }
.chat-pollnew__form { display: flex; flex-direction: column; gap: 12px; }
.chat-pollnew__q { width: 100%; min-height: 64px; resize: vertical; }
.chat-pollnew__opts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.chat-pollnew__row { display: flex; align-items: center; gap: 6px; }
.chat-pollnew__row .input { flex: 1 1 auto; min-width: 0; }
.chat-pollnew__drop { width: 28px; height: 28px; flex: 0 0 auto; color: var(--color-muted); }
.chat-pollnew__drop[hidden] { display: none; }
.chat-pollnew__drop svg { width: 14px; height: 14px; }
.chat-pollnew__drop:hover { color: var(--color-danger); }
.chat-pollnew__add { align-self: flex-start; margin-top: 6px; }
.chat-pollnew__add[hidden] { display: none; }
.chat-pollnew__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.chat-fwd {
position: fixed; inset: 0; z-index: 120;
display: grid; place-items: center; padding: 24px;
background: rgba(7, 17, 31, 0);
transition: background-color .18s var(--ease);
}
.chat-fwd[hidden] { display: none; }
.chat-fwd.is-open { background: rgba(7, 17, 31, 0.62); }
.chat-fwd__panel {
display: flex; flex-direction: column; gap: 12px;
width: min(440px, 100%); max-height: min(560px, calc(86vh * var(--vu)));
padding: 16px; background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-pop);
opacity: 0; transform: translateY(12px) scale(0.98);
transition: opacity .18s var(--ease), transform .2s var(--ease-out);
}
.chat-fwd.is-open .chat-fwd__panel { opacity: 1; transform: none; }
.chat-fwd__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-fwd__title { font-size: 15px; font-weight: 800; }
.chat-fwd__close { width: 28px; height: 28px; color: var(--color-muted); }
.chat-fwd__close svg { width: 16px; height: 16px; }
.chat-fwd__search { position: relative; display: block; }
.chat-fwd__search svg {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
width: 15px; height: 15px; color: var(--color-faint); pointer-events: none;
}
.chat-fwd__search .input { width: 100%; padding-left: 34px; }
.chat-fwd__list {
flex: 1 1 auto; min-height: 120px; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px;
}
.chat-fwd__group { display: flex; flex-direction: column; gap: 2px; }
.chat-fwd__group[hidden] { display: none; }
.chat-fwd__group-title {
padding: 8px 10px 4px; font-size: 11.5px; font-weight: 750;
letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted);
}
.chat-fwd__item[hidden] { display: none; }
.chat-fwd__contact {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
background: transparent; text-align: left; cursor: pointer;
transition: background-color .12s var(--ease);
}
.chat-fwd__contact:hover { background: var(--color-primary-soft); }
.chat-fwd__avatar { flex: 0 0 auto; }
.chat-fwd__contact-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-fwd__contact-main strong {
font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-fwd__none { padding: 10px; }
.chat-fwd__check {
flex: 0 0 auto; margin-left: auto; display: grid; place-items: center;
width: 20px; height: 20px; border-radius: 50%;
border: 1.5px solid var(--color-border); background: transparent;
color: transparent; transition: background-color .12s var(--ease), border-color .12s var(--ease);
}
.chat-fwd__check svg { width: 12px; height: 12px; }
.chat-fwd__contact.is-picked { background: var(--color-primary-soft); }
.chat-fwd__contact.is-picked .chat-fwd__check {
background: var(--color-primary); border-color: var(--color-primary);
color: var(--color-on-primary);
}
.chat-fwd__foot {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
padding-top: 10px; border-top: 1px solid var(--color-border);
}
.chat-fwd__foot[hidden] { display: none; }
.chat-fwd__picked { margin-right: auto; font-size: 12.5px; font-weight: 700; }
.chat-fwd__foot .btn[hidden] { display: none; }
.chat-fwd__note {
margin: 6px 2px 0; padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface-soft);
}
.login-notes-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px; }
.login-notes-modal__backdrop { position: absolute; inset: 0; background: rgba(7,17,31,.78); backdrop-filter: blur(9px); }
.login-notes-modal__dialog {
position: relative; display: flex; flex-direction: column;
width: min(640px, 100%); max-height: calc(86vh * var(--vu));
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.login-notes-modal__head { padding: 18px 20px 12px; border-bottom: 1px solid var(--color-border); }
.login-notes-modal__title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 850; }
.login-notes-modal__note { margin-top: 4px; color: var(--color-muted); font-size: 12.5px; line-height: 1.5; }
.login-notes-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.login-note {
position: relative;
display: flex; gap: 10px; align-items: flex-start;
padding: 10px 12px; border: 1px solid var(--color-border);
border-radius: var(--radius-sm); background: var(--color-surface-soft);
transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.login-note .notif-drop__sev { margin-top: 6px; }
.login-note__content { min-width: 0; flex: 1 1 auto; }
.login-note__go {
position: absolute; inset: 0; z-index: 1; cursor: pointer;
padding: 0; border: 0; background: transparent; border-radius: inherit;
}
.login-note__go:disabled { cursor: default; }
.login-notes-modal--ready .login-note:hover {
background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface-soft));
border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}
.login-note__chevron {
flex: 0 0 auto; align-self: center; margin-left: auto; color: var(--color-muted);
transition: transform .16s var(--ease), color .16s var(--ease);
}
.login-note__chevron svg { width: 16px; height: 16px; display: block; }
.login-notes-modal:not(.login-notes-modal--ready) .login-note__chevron { opacity: .35; }
.login-notes-modal--ready .login-note:hover .login-note__chevron {
color: var(--color-primary-dark); transform: translateX(2px);
}
.login-note__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--color-muted); font-size: 12px; }
.login-note__priority { color: var(--color-danger); font-weight: 700; }
.login-note__title { display: block; margin-top: 2px; font-size: 14px; }
.login-note__source { display: block; margin-top: 2px; font-size: 12px; color: var(--color-muted); overflow-wrap: anywhere; }
.login-note__text { margin-top: 2px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.login-notes-modal__end { padding: 10px 0 4px; text-align: center; color: var(--color-muted); font-size: 12.5px; }
.login-notes-modal__foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 20px; border-top: 1px solid var(--color-border);
}
.login-notes-modal__hint { color: var(--color-muted); font-size: 12.5px; }
.login-notes-modal--ready .login-notes-modal__hint { color: var(--color-success); font-weight: 650; }
.login-notes-open { overflow: hidden; }
@media (max-width: 720px) {
.login-notes-modal { padding: 10px; }
.login-notes-modal__dialog { max-height: calc(94vh * var(--vu)); }
}
.chat-switch {
display: inline-flex; gap: 4px; padding: 4px; align-self: flex-start;
max-width: 100%; width: fit-content;
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
background: var(--color-surface-soft);
}
.chat-switch__item {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 16px; border-radius: var(--radius-pill);
font-size: 13.5px; font-weight: 650; color: var(--color-muted);
text-decoration: none; white-space: nowrap;
transition: background .15s var(--ease), color .15s var(--ease);
}
a.chat-switch__item:hover { background: var(--color-surface); color: var(--color-text); }
.chat-switch__item.is-active {
background: var(--color-primary); color: var(--color-on-primary);
box-shadow: var(--shadow-sm);
}
.chat-switch__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: var(--radius-pill); background: var(--color-danger);
color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}
.chat-recipients__sep { padding: 0 4px; color: var(--color-faint); }
.chat-recipients__label { color: var(--color-faint); font-weight: 600; }
.chat-recipients__person {
display: inline-flex; align-items: center; gap: 6px;
color: var(--color-text); font-weight: 650;
}
.page__head--compact .chat-recipients .role-badge {
padding: 2px 7px; font-size: 10.5px; font-weight: 750;
}
.page--chat-list .filters-bar { padding: 8px 10px; }
.page--chat-list .filters-bar__search { grid-column: 1 / -1; }
.chat-thread-list { display: flex; flex-direction: column; }
.chat-list-group { display: flex; flex-direction: column; }
.chat-list-group + .chat-list-group { margin-top: 12px; }
.chat-list-group__title {
padding: 2px 10px 6px; font-size: 11.5px; font-weight: 750;
letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted);
}
.chat-thread {
display: flex; align-items: stretch; gap: 4px;
border-bottom: 1px solid var(--color-border); border-radius: var(--radius-sm);
transition: background .15s var(--ease);
}
.chat-thread:last-child { border-bottom: 0; }
.chat-thread:hover { background: var(--color-surface-soft); }
.chat-thread__link {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: 12px;
padding: 9px 10px; color: inherit; text-decoration: none;
}
.chat-thread__avatar { flex: 0 0 auto; }
.chat-thread__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.chat-thread__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-thread__preview {
font-size: 13px; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-thread__preview strong { color: var(--color-text); font-weight: 600; margin-right: 4px; }
.chat-thread__preview--empty { color: var(--color-faint); font-style: italic; }
.chat-thread--unread .chat-thread__preview { color: var(--color-text); font-weight: 600; }
.chat-thread__preview--group .chat-thread__author,
.chat-thread--unread .chat-thread__preview--group .chat-thread__author {
color: var(--color-primary-dark); font-weight: 750;
}
.chat-thread__no-account {
padding: 2px 8px; border-radius: 999px;
border: 1px dashed var(--color-border);
color: var(--color-muted); font-size: 11px; font-weight: 650; white-space: nowrap;
}
.chat-thread__time--short { display: none; }
.chat-thread__aside {
display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
gap: 4px; flex: 0 0 auto; font-size: 12.5px;
}
.chat-thread__observe {
flex: 0 0 auto; align-self: center; margin-right: 4px;
width: 30px; height: 30px; border-radius: 50%;
border: 0; background: none; color: var(--color-faint); opacity: .55;
transition: color .15s var(--ease), background .15s var(--ease), opacity .15s var(--ease);
}
.chat-thread__observe svg { width: 17px; height: 17px; }
.chat-thread:hover .chat-thread__observe { opacity: 1; color: var(--color-muted); }
.chat-thread__observe:hover,
.chat-thread__observe:focus-visible {
opacity: 1; color: var(--color-primary-dark); background: var(--color-primary-soft);
transform: none;
}
.chat-split__view { display: none; }
.chat-split--cabinet .chat-split__view { display: flex; flex-direction: column; min-width: 0; }
.filters-bar--empty { display: none; }
.chat-split__grip { display: none; }
html.is-chat-resizing { cursor: col-resize; user-select: none; }
.chat-split__head { display: none; }
@media (min-width: 1100px) {
.page.page--chat-list {
height: calc(calc(100vh * var(--vu)) - var(--topbar-h));
height: calc(calc(100dvh * var(--vu)) - var(--topbar-h));
display: flex; flex-direction: column; min-height: 0;
}
.page--chat-list.page--reading > * { max-width: none; }
.chat-split {
flex: 1 1 auto; min-height: 0; padding: 0; gap: 0; overflow: hidden;
display: grid;
grid-template-columns:
clamp(280px, var(--chat-list-w, 400px), min(560px, 50%)) minmax(0, 1fr);
}
.chat-split__list {
position: relative;
display: flex; flex-direction: column; min-height: 0;
border-right: 1px solid var(--color-border);
background: var(--color-surface);
}
.chat-split__grip {
display: block; position: absolute; top: 0; bottom: 0; right: -6px;
width: 10px; z-index: 3; cursor: col-resize; touch-action: none;
}
.chat-split__grip::before {
content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px;
border-radius: 2px; background: transparent;
transition: background-color .16s var(--ease);
}
.chat-split__grip:hover::before,
.chat-split__grip:focus-visible::before,
html.is-chat-resizing .chat-split__grip::before { background: var(--color-primary); }
.chat-split__grip:focus-visible { outline: none; }
.page--chat-list > .page__head { display: none; }
.chat-split__head {
display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
padding: 10px 10px 0;
}
.chat-split__title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.chat-split__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.chat-tool { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.chat-tool svg { width: 17px; height: 17px; }
.chat-tool--primary {
background: var(--color-primary); border-color: var(--color-primary);
color: var(--color-on-primary);
}
.chat-tool--primary:hover {
background: var(--color-primary-dark); border-color: var(--color-primary-dark);
color: var(--color-on-primary);
}
.chat-split__list .filters-bar { flex: 0 0 auto; padding: 10px; }
.chat-split__list .filters-bar__search .input { border-radius: var(--radius-pill); }
.chat-split #chat-thread-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 10px; }
.chat-split .chat-list-group + .chat-list-group { margin-top: 14px; }
.chat-split .chat-thread { position: relative; border-bottom: 0; border-radius: var(--radius-lg); }
.chat-split .chat-thread + .chat-thread::before {
content: ""; position: absolute; left: 78px; right: 14px; top: 0; height: 1px;
background: var(--color-divider);
}
.chat-split .chat-thread:hover { background: var(--color-surface-soft); }
.chat-split .chat-thread__link { align-items: flex-start; padding: 12px 14px; gap: 12px; }
.chat-split .chat-thread__avatar { width: 52px; height: 52px; font-size: 18px; }
.chat-split .chat-thread__name { flex-wrap: nowrap; gap: 6px; min-width: 0; }
.chat-split .chat-thread__name strong {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
font-size: 17px;
}
.chat-split .chat-thread__preview {
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
white-space: normal; max-width: 100%; line-height: 1.38; font-size: 14.5px;
}
.chat-split .chat-thread__name .role-badge,
.chat-split .chat-thread__main .cell-sub { display: none; }
.chat-split .chat-thread__main .chat-thread__claimline {
display: block;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 100%;
}
.chat-split .chat-thread__link {
display: grid; grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "ava main" "ava aside";
align-items: start; column-gap: 12px; row-gap: 4px;
}
.chat-split .chat-thread__avatar { grid-area: ava; align-self: start; }
.chat-split .chat-thread__main { grid-area: main; }
.chat-split .chat-thread__aside {
grid-area: aside; flex-direction: row; align-items: center;
justify-content: flex-start; gap: 8px; padding-top: 0; font-size: 11.5px;
}
.chat-split .chat-thread__time--short::before {
content: ""; width: 13px; height: 13px; flex: 0 0 auto; background: currentColor;
-webkit-mask: var(--icon-clock) center / contain no-repeat;
mask: var(--icon-clock) center / contain no-repeat;
}
.chat-split .chat-thread__time { display: none; }
.chat-split .chat-thread__time--short { display: inline-flex; align-items: center; gap: 5px; }
@media (hover: hover) {
.chat-split .chat-thread__observe { opacity: 0; pointer-events: none; }
.chat-split .chat-thread:hover .chat-thread__observe,
.chat-split .chat-thread__observe:focus-visible {
opacity: 1; pointer-events: auto;
}
}
.chat-split .chat-thread.is-active,
.chat-split .chat-thread.is-active:hover { background: var(--color-primary-soft); }
html[data-theme="dark"] .chat-split .chat-thread.is-active,
html[data-theme="dark"] .chat-split .chat-thread.is-active:hover {
background: color-mix(in srgb, var(--chat-bubble-own) 26%, transparent);
}
.chat-split__view { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-pane__inner { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.chat-pane__head {
display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
padding: 12px 16px; border-bottom: 1px solid var(--color-border);
}
.chat-pane__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-pane__title {
margin: 0; font-size: 16px; font-weight: 750;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.chat-pane__sub {
margin: 0; font-size: 12.5px; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-pane__actions { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
.chat-split__view .chat-card,
.chat-split__view .claim-thread,
html[data-theme="dark"] .chat-split__view .chat-card,
html[data-theme="dark"] .chat-split__view .claim-thread,
html[data-theme="light"] .chat-split__view .chat-card,
html[data-theme="light"] .chat-split__view .claim-thread {
flex: 1 1 auto; min-height: 0;
border: 0; border-radius: 0; box-shadow: none; background: transparent;
padding: 12px 16px 14px;
}
.chat-split__view .claim-thread > .card__head { display: none; }
.chat-split__view .claim-thread .agreement-thread {
flex: 1 1 auto; min-height: 0;
}
.chat-split__view .claim-thread .agreement-thread__feed {
flex: 1 1 auto; max-height: none; min-height: 0;
}
.chat-split__view .chat-box {
border: 0; background: var(--chat-canvas); padding: 4px 0 12px 2px;
margin-right: -16px;
min-height: 0;
}
.chat-split__view .chat-box > .chat-msg { padding-right: 18px; }
.chat-split__view .chat-observe-note { padding: 8px 12px; font-size: 12.5px; }
.chat-pane__placeholder {
margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 24px; color: var(--color-faint); text-align: center;
}
.chat-pane__placeholder svg { width: 46px; height: 46px; }
.chat-pane__placeholder p { margin: 0; }
}
.chat-fwd-bar {
display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
padding: 8px 12px; border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
background: var(--color-primary-soft);
}
.chat-fwd-bar svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-primary-dark); }
.chat-fwd-bar__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.chat-fwd-bar__main strong { color: var(--color-primary-dark); }
.chat-fwd-bar__main .cell-sub {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-fwd-bar__cancel {
margin-left: auto; flex: 0 0 auto; width: 28px; height: 28px;
border: 0; background: none; color: var(--color-muted);
}
.chat-fwd-bar__cancel:hover { color: var(--color-danger); background: none; transform: none; }
.chat-fwd-bar__cancel svg { width: 15px; height: 15px; color: currentColor; }
.chat-reply-bar {
display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
padding: 8px 12px; border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
background: var(--color-primary-soft);
}
.chat-reply-bar[hidden] { display: none; }
.chat-reply-bar > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-primary-dark); }
.chat-observe-note {
display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
padding: 10px 14px; border-radius: var(--radius-lg);
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
background: var(--color-primary-soft); color: var(--color-text);
font-size: 13px; line-height: 1.45;
}
.chat-observe-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--color-primary-dark); }
.chat-observe-note--foot { margin: 12px 0 0; flex: 0 0 auto; }
.chat-monitor {
display: grid; grid-template-columns: minmax(260px, 340px) 1fr;
gap: 0; padding: 0; overflow: hidden;
min-height: 560px; height: calc(calc(100vh * var(--vu)) - 220px);
}
.chat-monitor__list {
display: flex; flex-direction: column; min-height: 0;
border-right: 1px solid var(--color-border); background: var(--color-surface-soft);
}
.chat-monitor__item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px; border: 0; border-radius: var(--radius-md);
background: transparent; text-align: left; cursor: pointer;
transition: background .15s var(--ease);
}
.chat-monitor__item:hover { background: var(--color-surface); }
.chat-monitor__item.is-active { background: var(--color-primary-soft); }
html[data-theme="dark"] .chat-monitor__item.is-active {
background: color-mix(in srgb, var(--chat-bubble-own) 26%, transparent);
}
.chat-monitor__avatar {
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
background: var(--color-primary); color: var(--color-on-primary);
font-weight: 650; font-size: 15px;
}
.chat-monitor__avatar--img { background: var(--color-surface-soft); overflow: hidden; }
.chat-monitor__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-thread__avatar--mark,
.chat-pane__mark {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.chat-thread__avatar--mark svg,
.chat-pane__mark svg { width: 19px; height: 19px; }
.chat-msg__avatar { width: 33px; height: 33px; font-size: 13px; align-self: flex-end; margin-right: 11px; }
a.chat-msg__avatar { cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
a.chat-msg__avatar:hover { transform: scale(1.08); box-shadow: var(--ring-soft); }
a.chat-msg__avatar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.chat-monitor__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.chat-monitor__item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-monitor__item-name {
font-size: 13.5px; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-monitor__item-time { flex: 0 0 auto; font-size: 11.5px; color: var(--color-muted); }
.chat-monitor__item-sub {
font-size: 12px; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-monitor__item-role { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.chat-monitor__empty { padding: 24px 14px; color: var(--color-muted); font-size: 13px; text-align: center; }
.chat-monitor__view { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-monitor__placeholder {
margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px;
color: var(--color-faint); text-align: center; padding: 24px;
}
.chat-monitor__placeholder svg { width: 46px; height: 46px; }
.chat-monitor__conv { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.chat-monitor__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--color-border); flex: 0 0 auto;
}
.chat-monitor__head-main { min-width: 0; }
.chat-monitor__head-title { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0; }
.chat-monitor__head-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--color-muted); }
.chat-monitor__note {
display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
padding: 8px 16px; font-size: 12.5px; color: var(--color-primary-dark);
background: var(--color-primary-soft);
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
}
.chat-monitor__note svg { width: 15px; height: 15px; flex: 0 0 auto; }
.chat-box--monitor { flex: 1 1 auto; overflow-y: auto; padding: 16px; min-height: 0; }
@media (max-width: 720px) {
.chat-monitor { grid-template-columns: 1fr; height: auto; }
.chat-monitor__list { border-right: 0; border-bottom: 1px solid var(--color-border); }
#dialog-partners { max-height: calc(40vh * var(--vu)); }
.chat-box--monitor { max-height: calc(60vh * var(--vu)); }
}
.dialog-pick-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.dialog-pick {
position: relative; display: flex; gap: 12px; align-items: flex-start;
padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface); color: inherit; text-decoration: none;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease),
transform .15s var(--ease);
}
.dialog-pick:hover {
border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.dialog-pick__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.dialog-pick__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.dialog-pick__sub {
font-size: 12.5px; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dialog-pick__meta {
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-top: 4px; font-size: 12px; color: var(--color-muted);
}
.dialog-pick__badge { position: absolute; top: 12px; right: 12px; }
.dialog-pick__roles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.dialog-pick__position { font-size: 12px; font-weight: 650; color: var(--color-muted); }
.dialog-pick--unread {
border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
.dialog-partners__head {
padding: 12px 16px 6px; flex: 0 0 auto;
font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
color: var(--color-muted);
}
#dialog-partners { overflow-y: auto; flex: 1 1 auto; padding: 0 8px 8px; }
.chat-thread--unread {
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
box-shadow: inset 3px 0 0 var(--color-primary);
}
.chat-thread--unread:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.chat-thread--unread .chat-thread__name strong { font-weight: 800; }
.chat-thread--unread .chat-thread__aside .cell-muted { color: var(--color-text); font-weight: 650; }
@keyframes chat-badge-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 45%, transparent); }
70% { box-shadow: 0 0 0 7px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.chat-unread-badge:not([hidden]) { animation: chat-badge-pulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
.chat-unread-badge:not([hidden]) { animation: none; }
}
@keyframes xchg-badge-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-warning) 45%, transparent); }
70% { box-shadow: 0 0 0 7px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.xchg-free-badge:not([hidden]) { animation: xchg-badge-pulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
.xchg-free-badge:not([hidden]) { animation: none; }
}
@media (max-width: 720px) {
.chat-msg__bubble { max-width: 92%; }
.chat-form__row { flex-direction: column; align-items: stretch; }
.chat-form__tools .btn[type="submit"] { flex: 1 1 auto; }
.chat-emoji__pop { right: auto; left: 0; }
}
.kpi-calc .card { display: flex; flex-direction: column; gap: 14px; }
.kpi-calc [hidden] { display: none !important; }
.seg-toggle {
display: inline-flex; gap: 4px; padding: 4px;
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
background: var(--color-surface-soft); width: fit-content;
}
.seg-toggle__item { position: relative; }
.seg-toggle__item input { position: absolute; opacity: 0; pointer-events: none; }
.seg-toggle__item span {
display: inline-block; padding: 7px 16px; border-radius: var(--radius-pill);
font-size: 13.5px; font-weight: 650; color: var(--color-muted);
cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.seg-toggle__item input:checked + span {
background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm);
}
.seg-toggle__item input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check-row input { margin-top: 3px; }
.kpi-batch-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kpi-batch-mini li {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 13.5px;
}
.kpi-batch-mini li:last-child { border-bottom: 0; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips--compact { gap: 6px; }
.chips--compact .chip { padding: 4px 9px; font-size: 12px; font-weight: 600; }
.fbar {
display: flex; align-items: flex-end; gap: 12px 18px; flex-wrap: wrap;
margin-bottom: 18px; padding: 14px 16px;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface);
}
.fbar__pick { flex: 1 1 260px; min-width: 0; }
.fbar__pick .form-field { gap: 6px; }
.fbar__pick .input { width: 100%; }
.fbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.fbuild { display: grid; gap: 18px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.fbuild__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: none; }
.fbuild__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (min-width: 928px) {
.fbuild { grid-template-columns: minmax(0, 1fr) minmax(288px, 336px); }
.fbuild__side { position: sticky; top: 12px; }
}
.fbuild .card { display: flex; flex-direction: column; gap: 14px; }
.fbuild [hidden] { display: none !important; }
.fstep { display: flex; align-items: flex-start; gap: 12px; }
.fstep__num {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary-soft); color: var(--color-primary-dark);
font-size: 12.5px; font-weight: 800; line-height: 1;
}
.fstep__titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fstep__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-heading); line-height: 1.25; }
.fstep__hint { font-size: 12.5px; color: var(--color-muted); line-height: 1.4; }
.frules { display: flex; flex-direction: column; gap: 12px; }
.frule {
display: flex; flex-direction: column; gap: 12px;
padding: 14px; border: 1px solid var(--color-border);
border-radius: var(--radius-lg); background: var(--color-surface-soft);
transition: border-color .18s var(--ease), opacity .18s var(--ease);
}
.frule--new { border-style: dashed; background: transparent; }
.frule:has(.fcheck--danger input:checked) { opacity: .5; border-color: var(--color-danger); }
.frule__top { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.frule__name { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.frule__name .input { width: 100%; font-weight: 650; }
.frule__flags { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.frule__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.frule__grid .field__label { font-size: 12px; }
.frule__grid .input, .frule__grid select.input { width: 100%; min-width: 0; }
@media (min-width: 820px) {
.frule__grid--modes { grid-template-columns: 0.85fr 1.4fr 0.85fr 0.9fr; }
}
.frule__badge {
flex: 0 0 auto; padding: 3px 9px; border-radius: var(--radius-pill);
background: var(--color-surface); border: 1px solid var(--color-border);
font-size: 11.5px; font-weight: 700; color: var(--color-muted); white-space: nowrap;
}
.fcheck {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
font-size: 12.5px; font-weight: 600; color: var(--color-muted); white-space: nowrap;
}
.fcheck input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; margin: 0; }
.fcheck--danger { color: var(--color-danger); }
.fcheck--danger input { accent-color: var(--color-danger); }
.fmetric__head { display: flex; align-items: flex-start; gap: 10px; }
.fmetric__titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fmetric__name { font-size: 14px; font-weight: 700; color: var(--color-heading); }
.fmetric__hint { font-size: 12px; color: var(--color-muted); line-height: 1.4; }
.fmetric .fcheck { margin-top: 1px; }
.form-field--pair { grid-column: span 2; }
.fpair { display: flex; align-items: center; gap: 8px; }
.fpair .input { flex: 1 1 0; min-width: 64px; }
.fpair__sep { color: var(--color-muted); font-size: 12px; white-space: nowrap; }
.kpi-sim__result { display: flex; flex-direction: column; gap: 6px; }
.kpi-sim__score { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-heading); line-height: 1; }
.kpi-sim__scale { color: var(--color-muted); font-size: 12.5px; }
.kpi-sim__bar {
height: 8px; border-radius: 999px; overflow: hidden;
background: var(--color-surface-soft); border: 1px solid var(--color-border);
}
.kpi-sim__bar span {
display: block; height: 100%; width: 0;
background: var(--gradient-primary); border-radius: inherit;
transition: width .25s var(--ease);
}
.kpi-sim__bonus { font-weight: 650; font-size: 13.5px; color: var(--color-primary-dark); }
.form-grid--sim { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form-grid--sim .field__label { font-size: 12px; }
.form-grid--sim .input { padding: 7px 9px; font-size: 13px; }
.kpi-sim__breakdown, .kpi-sim__formula { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kpi-sim__breakdown li, .kpi-sim__formula li {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: 13px;
}
.kpi-sim__breakdown li:last-child, .kpi-sim__formula li:last-child { border-bottom: 0; }
.kpi-sim__breakdown li span, .kpi-sim__formula li span { color: var(--color-muted); }
.kpi-sim__breakdown li strong, .kpi-sim__formula li strong { text-align: right; white-space: nowrap; }
.kpi-sim__formula li { flex-direction: column; align-items: flex-start; gap: 3px; }
.kpi-sim__formula li strong { text-align: left; white-space: normal; }
.kpi-cab-hero {
position: relative; display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
padding: 28px; margin-bottom: 18px;
border-radius: var(--radius-2xl); border: 1px solid var(--color-border);
background: var(--color-surface); box-shadow: var(--shadow-card);
--kpi-tone: var(--color-primary); --kpi-tone-soft: var(--color-primary-soft);
}
.kpi-cab-hero::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(circle at 0% 0%, var(--kpi-tone-soft), transparent 52%);
opacity: .8;
}
.kpi-cab-hero > * { position: relative; }
.kpi-cab-hero--excellent { --kpi-tone: var(--color-success); --kpi-tone-soft: var(--color-success-soft); }
.kpi-cab-hero--good { --kpi-tone: var(--color-primary); --kpi-tone-soft: var(--color-primary-soft); }
.kpi-cab-hero--attention { --kpi-tone: var(--color-warning); --kpi-tone-soft: var(--color-warning-soft); }
.kpi-cab-hero--risk { --kpi-tone: var(--color-danger); --kpi-tone-soft: var(--color-danger-soft); }
.kpi-cab-ring {
width: 176px; height: 176px; flex: 0 0 176px; border-radius: 50%; position: relative;
background: conic-gradient(var(--kpi-tone) calc(var(--val, 0) * 1%), var(--color-surface-soft) 0);
animation: kpi-ring-pop .7s var(--ease) both;
}
@keyframes kpi-ring-pop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
.kpi-cab-ring--sm { width: 140px; height: 140px; flex-basis: 140px; }
.kpi-cab-ring::after {
content: ""; position: absolute; inset: 13px; border-radius: 50%;
background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border);
}
.kpi-cab-ring__center {
position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 2px; text-align: center;
}
.kpi-cab-ring__center strong { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--color-heading); }
.kpi-cab-ring--sm .kpi-cab-ring__center strong { font-size: 34px; }
.kpi-cab-ring__center span { font-size: 12px; color: var(--color-muted); }
.kpi-cab-hero__info { flex: 1; min-width: 240px; display: grid; gap: 8px; justify-items: start; }
.kpi-cab-hero__eyebrow {
color: var(--color-primary-dark); font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em;
}
.kpi-cab-hero__title { font-size: 27px; line-height: 1.1; letter-spacing: -0.015em; }
.kpi-cab-hero__msg { color: var(--color-muted); max-width: 46ch; }
.kpi-cab-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kpi-cab-chip {
display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px;
border-radius: var(--radius-pill); border: 1px solid var(--color-border);
background: var(--color-surface-soft); font-size: 12.5px; color: var(--color-muted);
}
.kpi-cab-chip strong { color: var(--color-heading); }
.kpi-cab-chip--money { border-color: color-mix(in srgb, var(--kpi-tone) 40%, var(--color-border)); background: var(--kpi-tone-soft); color: var(--color-text); }
.kpi-cab-next { display: grid; gap: 7px; width: 100%; max-width: 460px; margin-top: 2px; }
.kpi-cab-next__label { font-size: 13px; color: var(--color-muted); }
.kpi-cab-next__label strong { color: var(--color-heading); }
.kpi-cab-next__label--top { font-weight: 650; color: var(--color-success); }
.kpi-cab-next__track {
display: block; height: 8px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); border: 1px solid var(--color-border); overflow: hidden;
}
.kpi-cab-next__fill {
display: block; height: 100%; width: var(--w, 0); border-radius: inherit;
background: linear-gradient(90deg, var(--kpi-tone), color-mix(in srgb, var(--kpi-tone) 55%, #fff));
}
.kpi-cab-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.kpi-cab-rate { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 10px; }
.kpi-cab-rate__amount { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-heading); }
.kpi-cab-rate__type { color: var(--color-muted); }
.kpi-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kpi-ladder__item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 13px; border-radius: var(--radius-lg);
border: 1px solid var(--color-border); background: var(--color-surface-soft);
}
.kpi-ladder__item--passed { opacity: .68; }
.kpi-ladder__item--current {
border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
background: var(--color-primary-soft); box-shadow: var(--ring-soft);
}
.kpi-ladder__item strong { display: block; font-size: 13.5px; }
.kpi-ladder__range { display: block; color: var(--color-muted); font-size: 12px; margin-top: 2px; }
.kpi-ladder__bonus { font-weight: 800; white-space: nowrap; text-align: right; }
.kpi-ladder__you {
display: block; font-style: normal; font-weight: 800; font-size: 11px;
color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .05em;
}
.kpi-zone { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.kpi-zone__item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 13px; border-radius: var(--radius-lg);
background: var(--color-surface-soft); border: 1px solid var(--color-border);
}
.kpi-zone__item--loss { border-left: 4px solid var(--color-danger); }
.kpi-zone__item--loss > b { color: var(--color-danger); }
.kpi-zone__item--gain { border-left: 4px solid var(--color-success); }
.kpi-zone__item--gain > b { color: var(--color-success); }
.kpi-zone__item strong { font-size: 13.5px; }
.kpi-zone__item .cell-sub { display: block; margin-top: 2px; }
.kpi-cab-bars {
display: flex; align-items: stretch; gap: 8px; height: 176px;
background: repeating-linear-gradient(180deg, var(--color-divider) 0 1px, transparent 1px 25%);
background-position: 0 100%;
}
.kpi-cab-bars__bar {
flex: 1; max-width: 52px; display: flex; flex-direction: column; justify-content: flex-end;
align-items: stretch; gap: 5px; text-align: center; color: inherit;
}
.kpi-cab-bars__bar b { font-size: 12px; font-weight: 800; }
.kpi-cab-bars__bar i {
display: block; height: max(var(--h, 0%), 4px); min-height: 4px;
border-radius: 8px 8px 0 0;
background: var(--color-primary);
transition: filter .18s var(--ease), background-color .18s var(--ease);
}
.kpi-cab-bars__bar:not(.is-active) i { background: color-mix(in srgb, var(--color-primary) 38%, transparent); }
.kpi-cab-bars__bar.is-active i { background: var(--color-primary); }
.kpi-cab-bars__bar:hover i { filter: brightness(1.12); }
.kpi-cab-bars__bar span { font-size: 11.5px; color: var(--color-muted); }
.kpi-teaser__row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.kpi-teaser__ring {
width: 76px; height: 76px; flex: 0 0 76px; border-radius: 50%; position: relative;
display: flex; align-items: center; justify-content: center;
background: conic-gradient(var(--color-primary) calc(var(--val, 0) * 1%), var(--color-surface-soft) 0);
}
.kpi-teaser--excellent .kpi-teaser__ring { background: conic-gradient(var(--color-success) calc(var(--val, 0) * 1%), var(--color-surface-soft) 0); }
.kpi-teaser--attention .kpi-teaser__ring { background: conic-gradient(var(--color-warning) calc(var(--val, 0) * 1%), var(--color-surface-soft) 0); }
.kpi-teaser--risk .kpi-teaser__ring { background: conic-gradient(var(--color-danger) calc(var(--val, 0) * 1%), var(--color-surface-soft) 0); }
.kpi-teaser__ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--color-surface); }
.kpi-teaser__ring strong { position: relative; z-index: 1; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.kpi-teaser__info { display: grid; gap: 3px; }
.kpi-teaser__level { font-size: 16px; }
.kpi-teaser__bonus { font-size: 13px; color: var(--color-muted); }
.kpi-teaser__bonus b { color: var(--color-heading); }
@media (max-width: 760px) {
.kpi-cab-hero { padding: 20px; gap: 18px; justify-content: center; text-align: center; }
.kpi-cab-hero__info { justify-items: center; }
.kpi-cab-ring { width: 150px; height: 150px; flex-basis: 150px; }
.kpi-cab-bars { gap: 6px; }
.kpi-cab-bars__bar b { font-size: 10.5px; }
}
.ins-hero {
position: relative; display: flex; gap: 26px; flex-wrap: wrap; align-items: stretch;
padding: 28px; margin-bottom: 18px; overflow: hidden;
border-radius: var(--radius-2xl); border: 1px solid var(--color-border);
background: var(--color-surface); box-shadow: var(--shadow-card);
}
.ins-hero::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background:
radial-gradient(circle at 0% 0%, var(--color-primary-soft), transparent 52%),
radial-gradient(circle at 100% 100%, var(--color-beige-soft), transparent 46%);
opacity: .85;
}
.ins-hero > * { position: relative; }
.ins-hero__info { flex: 1 1 320px; min-width: 260px; display: grid; gap: 8px; align-content: start; }
.ins-hero__eyebrow {
color: var(--color-primary-dark); font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em;
}
.ins-hero__title { font-size: 26px; line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
.ins-hero__msg { color: var(--color-muted); max-width: 52ch; margin: 0; }
.ins-hero__progress { display: grid; gap: 7px; max-width: 420px; margin-top: 6px; }
.ins-hero__count { font-size: 13px; color: var(--color-muted); }
.ins-hero__count b { color: var(--color-heading); font-weight: 800; }
.ins-hero__track {
display: block; height: 8px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); border: 1px solid var(--color-border); overflow: hidden;
}
.ins-hero__fill {
display: block; height: 100%; width: 0; border-radius: inherit;
background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, #fff));
transition: width .45s var(--ease-out);
}
.ins-hero__alldone { font-size: 13px; font-weight: 700; color: var(--color-success); }
.ins-hero__rules { flex: 0 1 300px; min-width: 240px; display: grid; gap: 10px; align-content: center; }
.ins-rule {
display: flex; align-items: center; gap: 14px; padding: 13px 16px;
border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
background: var(--color-primary-soft);
}
.ins-rule--timer {
border-color: color-mix(in srgb, var(--color-warning) 38%, var(--color-border));
background: var(--color-warning-soft);
}
.ins-rule__value {
font-size: 24px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap;
color: var(--color-primary-dark);
}
.ins-rule--timer .ins-rule__value { color: var(--color-warning); }
.ins-rule__text { font-size: 12.5px; line-height: 1.45; color: var(--color-text); }
.ins-day__track {
list-style: none; margin: 4px 0 10px; padding: 4px 2px 8px;
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 8px;
overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.ins-stop { scroll-snap-align: start; display: grid; }
.ins-stop__btn {
position: relative; display: grid; gap: 3px; justify-items: start; text-align: left;
padding: 12px 14px 14px; border-radius: var(--radius-lg);
border: 1px solid var(--color-border); background: var(--color-surface-soft);
font: inherit; color: inherit; cursor: pointer;
transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.ins-stop__btn--static { cursor: default; }
.ins-stop__btn:not(.ins-stop__btn--static):hover {
border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.ins-stop__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ins-stop__time {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
color: var(--color-primary-dark);
}
.ins-stop__dot {
width: 10px; height: 10px; border-radius: 50%; margin: 3px 0;
background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.ins-stop { position: relative; }
.ins-stop:not(:last-child)::after {
content: ""; position: absolute; top: 44px; right: -8px; width: 8px; height: 2px;
background: var(--color-border-strong);
}
.ins-stop__title { font-size: 13.5px; color: var(--color-heading); }
.ins-stop__text { font-size: 12px; color: var(--color-muted); line-height: 1.4; }
.ins-day__hint { font-size: 12px; margin: 0; }
.ins-list { display: grid; gap: 12px; margin-bottom: 18px; }
.ins-card {
border-radius: var(--radius-xl); border: 1px solid var(--color-border);
background: var(--color-surface); box-shadow: var(--shadow-card);
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ins-card[open] { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); box-shadow: var(--shadow-soft); }
.ins-card--flash { box-shadow: var(--ring-soft), var(--shadow-soft); }
.ins-card__head {
display: flex; align-items: center; gap: 14px; padding: 15px 18px;
cursor: pointer; list-style: none; border-radius: inherit; user-select: none;
}
.ins-card__head::-webkit-details-marker { display: none; }
.ins-card__head:focus-visible { outline: none; box-shadow: var(--ring); }
.ins-card__icon {
flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center;
color: var(--color-primary);
}
.ins-card__icon svg { width: 28px; height: 28px; }
.ins-card__heading { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ins-card__title { font-size: 15px; color: var(--color-heading); letter-spacing: -0.01em; }
.ins-card__tagline { font-size: 12.5px; color: var(--color-muted); }
.ins-card__meta { display: flex; align-items: center; gap: 10px; }
.ins-card__count { font-size: 12px; color: var(--color-faint); white-space: nowrap; }
.ins-card__chev { display: grid; place-items: center; color: var(--color-faint); transition: transform .2s var(--ease); }
.ins-card__chev svg { width: 18px; height: 18px; }
.ins-card[open] .ins-card__chev { transform: rotate(180deg); }
.ins-card__check {
display: none; width: 22px; height: 22px; border-radius: 50%;
place-items: center; color: #fff; background: var(--color-success);
}
.ins-card__check svg { width: 13px; height: 13px; }
.ins-card.is-read .ins-card__check { display: grid; }
.ins-card.is-read .ins-card__icon { color: var(--color-success); background: var(--color-success-soft); }
.ins-card__body { padding: 2px 18px 18px; animation: ins-body-in .28s var(--ease-out) both; }
@keyframes ins-body-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ins-callout {
margin: 8px 0 14px; padding: 11px 14px; border-radius: var(--radius-lg);
font-size: 13px; line-height: 1.5;
border: 1px solid color-mix(in srgb, var(--color-danger) 34%, var(--color-border));
background: var(--color-danger-soft);
}
.ins-callout--rule b { color: var(--color-danger); }
.ins-callout--tip {
margin: 14px 0; border-color: color-mix(in srgb, var(--color-info) 32%, var(--color-border));
background: var(--color-info-soft);
}
.ins-callout--tip b { color: var(--color-primary-dark); }
.ins-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ins-step { position: relative; display: flex; gap: 14px; padding: 8px 2px; }
.ins-step:not(:last-child)::before {
content: ""; position: absolute; left: 15px; top: 40px; bottom: -6px; width: 2px;
background: var(--color-border);
}
.ins-step__num {
flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center;
border-radius: 50%; font-size: 13px; font-weight: 800;
color: var(--color-primary-dark); background: var(--color-primary-soft);
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}
.ins-step__content { display: grid; gap: 2px; padding-top: 3px; }
.ins-step__content strong { font-size: 13.5px; color: var(--color-heading); }
.ins-step__content p { margin: 0; font-size: 13px; color: var(--color-muted); line-height: 1.5; }
.ins-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ins-card.is-read [data-guide-read] {
background: var(--color-success-soft); color: var(--color-success);
border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-border));
box-shadow: none; background-image: none;
}
.ins-help { margin-bottom: 18px; }
.ins-help__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ins-help__title { display: block; font-size: 15px; margin-bottom: 3px; color: var(--color-heading); }
.ins-help__row .cell-muted { margin: 0; max-width: 60ch; }
.ins-shots { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.ins-shot { margin: 0; flex: 1 1 380px; min-width: 260px; max-width: 560px; }
.ins-shot--phone { flex: 0 1 240px; min-width: 200px; }
.ins-shot__btn {
display: block; width: 100%; padding: 0; border: 0; background: none;
cursor: zoom-in; border-radius: 12px;
}
.ins-shot__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ins-shot__frame {
display: block; overflow: hidden; border-radius: 12px;
border: 1px solid var(--color-border); background: var(--color-surface);
box-shadow: var(--shadow-soft);
transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ins-shot__btn:hover .ins-shot__frame { transform: translateY(-2px); box-shadow: var(--shadow-pop, var(--shadow-soft)); }
.ins-shot__bar {
display: flex; gap: 5px; padding: 8px 10px;
border-bottom: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-border) 26%, var(--color-surface));
}
.ins-shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-faint); opacity: .55; }
.ins-shot__img { display: block; width: 100%; height: auto; }
.ins-shot__img--dark { display: none; }
[data-theme="dark"] .ins-shot__img--light { display: none; }
[data-theme="dark"] .ins-shot__img--dark { display: block; }
.ins-shot__caption { margin-top: 7px; font-size: 12.5px; color: var(--color-muted); line-height: 1.45; }
@media (max-width: 760px) {
.ins-hero { padding: 20px; gap: 16px; }
.ins-hero__title { font-size: 22px; }
.ins-hero__rules { flex-basis: 100%; }
.ins-day__track { grid-auto-columns: minmax(168px, 72%); }
.ins-card__head { padding: 13px 14px; gap: 11px; }
.ins-card__count { display: none; }
.ins-card__body { padding: 0 14px 16px; }
}
.offset-dropzone {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 34px 22px; text-align: center; cursor: pointer;
border: 2px dashed color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.offset-dropzone:hover,
.offset-dropzone:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); }
.offset-dropzone.is-dragover {
border-color: var(--color-primary); border-style: solid;
background: var(--color-primary-soft); transform: scale(1.01);
}
.offset-dropzone.is-uploading { opacity: .65; pointer-events: none; }
.offset-dropzone__icon {
width: 44px; height: 44px; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.offset-dropzone__icon svg { width: 22px; height: 22px; }
.offset-dropzone__title { font-weight: 700; }
.offset-dropzone__hint { font-size: 12.5px; color: var(--color-muted); }
.offset-dropzone input[type="file"] {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.bundle-dropzone.is-ready {
border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-border));
background: color-mix(in srgb, var(--color-success) 6%, var(--color-surface));
}
.bundle-dropzone.is-ready .offset-dropzone__icon {
background: var(--color-success-soft); color: var(--color-success);
}
.bundle-dropzone.is-invalid {
border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-border));
background: color-mix(in srgb, var(--color-danger) 5%, var(--color-surface));
}
.bundle-dropzone.is-invalid .offset-dropzone__icon {
background: var(--color-danger-soft); color: var(--color-danger);
}
.bundle-check[hidden], .bundle-check__stats[hidden], .bundle-stat[hidden] { display: none; }
.bundle-check {
display: flex; flex-direction: column; gap: 10px;
padding: 14px 16px; border-radius: var(--radius-md);
border: 1px solid var(--color-border); background: var(--color-surface-alt, var(--color-surface));
}
.bundle-check--ok { border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border)); }
.bundle-check--error { border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)); }
.bundle-check__file { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bundle-check__name { font-weight: 700; word-break: break-all; }
.bundle-check__meta { font-size: 12.5px; }
.bundle-check__stats { display: flex; gap: 10px; flex-wrap: wrap; }
.bundle-stat {
display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px;
border-radius: 999px; background: var(--color-primary-soft);
color: var(--color-primary-dark); font-size: 13px;
}
.bundle-stat b { font-size: 15px; font-weight: 800; }
.bundle-stat--warn { background: var(--color-warning-soft, var(--color-coral-soft)); color: var(--color-warning, var(--color-coral)); }
.bundle-check__error { margin: 0; color: var(--color-danger); font-weight: 600; }
.dropbay { display: flex; flex-direction: column; gap: 12px; }
.dropbay__zone {
position: relative; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 7px; padding: 40px 24px; text-align: center; cursor: pointer;
border: 2px dashed color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
border-radius: var(--radius-lg);
background:
radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 70%),
var(--color-surface);
transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.dropbay__zone:hover,
.dropbay__zone:focus-visible { border-color: var(--color-primary); }
.dropbay__zone.is-dragover {
border-color: var(--color-primary); border-style: solid; transform: scale(1.008);
background: var(--color-primary-soft);
}
.dropbay__zone.is-ready {
border-style: solid;
border-color: color-mix(in srgb, var(--color-success) 50%, var(--color-border));
background: color-mix(in srgb, var(--color-success) 5%, var(--color-surface));
}
.dropbay__zone.is-ready .dropbay__icon { background: var(--color-success-soft); color: var(--color-success); }
.dropbay__zone.is-invalid {
border-style: solid;
border-color: color-mix(in srgb, var(--color-danger) 50%, var(--color-border));
background: color-mix(in srgb, var(--color-danger) 5%, var(--color-surface));
}
.dropbay__zone.is-invalid .dropbay__icon { background: var(--color-danger-soft); color: var(--color-danger); }
.dropbay__zone.is-uploading { opacity: .6; pointer-events: none; }
.dropbay__icon {
width: 48px; height: 48px; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary-soft); color: var(--color-primary-dark);
transition: background .18s var(--ease), color .18s var(--ease);
}
.dropbay__icon svg { width: 23px; height: 23px; }
.dropbay__title { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.dropbay__hint { font-size: 12.5px; color: var(--color-muted); }
.dropbay__kinds { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.dropbay__kind {
display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px;
border-radius: 999px; border: 1px solid var(--color-border);
background: var(--color-surface-alt, var(--color-surface));
font-size: 12px; color: var(--color-muted);
}
.dropbay__kind b { font-weight: 800; color: var(--color-heading); letter-spacing: .02em; }
.dropbay__zone input[type="file"] {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dropbay__stage[hidden], .dropbay__opt[hidden], .dropbay__error[hidden] { display: none; }
.dropbay__stage {
display: flex; flex-direction: column; gap: 12px;
padding: 14px 16px; border-radius: var(--radius-md);
border: 1px solid var(--color-border); background: var(--color-surface);
}
.dropbay__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.dropbay__file { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.dropbay__file.is-bad .dropbay__file-meta { color: var(--color-danger); font-weight: 600; }
.dropbay__badge {
flex: none; padding: 3px 8px; border-radius: 6px;
font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.dropbay__badge--pdf { background: var(--color-coral-soft, var(--color-warning-soft)); color: var(--color-coral, var(--color-warning)); }
.dropbay__file-name { font-weight: 600; word-break: break-all; }
.dropbay__file-meta { color: var(--color-muted); font-size: 12.5px; }
.dropbay__error { margin: 0; color: var(--color-danger); font-weight: 600; font-size: 13px; }
.dropbay__opt {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 11px 13px; border-radius: var(--radius-md);
background: var(--color-surface-alt, var(--color-primary-soft));
}
.dropbay__opt-label { font-size: 13px; font-weight: 600; }
.dropbay__opt-select {
padding: 6px 10px; border-radius: 8px; font: inherit; font-size: 13px;
border: 1px solid var(--color-border); background: var(--color-surface);
color: var(--color-text);
}
.dropbay__opt-hint { flex-basis: 100%; font-size: 12px; color: var(--color-muted); }
.dropbay__go { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
.dropbay__zone { padding: 30px 16px; }
.dropbay__kinds { flex-direction: column; align-items: center; }
.dropbay__go { justify-content: stretch; }
.dropbay__go .btn { flex: 1; }
}
.impsel { display: flex; flex-direction: column; gap: 10px; }
.impsel__total { flex: none; align-self: flex-start; white-space: nowrap; font-size: 13px; }
.impsel__group {
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface);
transition: border-color .16s var(--ease), opacity .16s var(--ease);
}
.impsel__group.is-off { opacity: .55; border-style: dashed; }
.impsel__head {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 11px 14px;
}
.impsel__toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.impsel__toggle input[type="checkbox"] {
width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer;
}
.impsel__name { font-weight: 700; font-size: 14.5px; color: var(--color-heading); }
.impsel__meta {
margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--color-muted);
}
.impsel__rows { border-top: 1px solid var(--color-border); }
.impsel__rows > summary {
padding: 9px 14px; cursor: pointer; font-size: 13px; color: var(--color-muted);
user-select: none;
}
.impsel__rows > summary:hover { color: var(--color-primary); }
.impsel__bulk {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 0 14px 8px;
}
.impsel__count { font-size: 12.5px; color: var(--color-muted); margin-left: auto; }
.impsel__list {
list-style: none; margin: 0; padding: 0 8px 8px;
max-height: 380px; overflow-y: auto;
}
.impsel__row + .impsel__row { border-top: 1px solid var(--color-border-soft, var(--color-border)); }
.impsel__pick {
display: flex; align-items: center; gap: 10px; padding: 7px 6px; cursor: pointer;
}
.impsel__pick input[type="checkbox"] {
flex: none; width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer;
}
.impsel__label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.impsel__title { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.impsel__sub {
font-size: 12.5px; color: var(--color-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.impsel__note { margin-left: auto; flex: none; font-size: 12.5px; color: var(--color-muted); }
.impsel__row.is-off .impsel__label { opacity: .5; text-decoration: line-through; }
.impsel__more, .impsel__hint { margin: 0; padding: 0 14px 12px; font-size: 12.5px; }
.impsel__period {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 14px; border-top: 1px solid var(--color-border);
}
.impsel__period-pick {
display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 13px; color: var(--color-muted);
}
.impsel__period-pick .input { width: auto; min-width: 200px; min-height: var(--control-h-sm); }
.impsel__period-hint { flex-basis: 100%; margin: 0; font-size: 12.5px; }
.impsel__row.is-out { display: none; }
@media (max-width: 640px) {
.impsel__note { margin-left: 0; }
.impsel__pick { flex-wrap: wrap; }
.impsel__period-pick .input { width: 100%; min-width: 0; }
}
.ext-update {
display: grid; grid-template-columns: auto 1fr; gap: 12px 16px;
background: color-mix(in srgb, var(--color-warning) 7%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
border-left: 4px solid var(--color-warning);
}
.ext-update__icon {
align-self: start; margin-top: 2px;
flex: none; width: 38px; height: 38px; border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--color-warning) 18%, transparent);
color: var(--color-warning);
}
.ext-update__icon svg { width: 20px; height: 20px; }
.ext-update__body {
display: flex; flex-wrap: wrap; gap: 12px 18px;
align-items: center; justify-content: space-between;
}
.ext-update__title { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--color-heading); }
.ext-update__text { margin: 0; font-size: 13px; color: var(--color-muted); max-width: 62ch; }
.ext-update__notes { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ext-update__notes li { font-size: 13px; color: var(--color-muted); }
.ext-update__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ext-update__actions form { margin: 0; }
.ext-version { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ext-steps {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; margin: 14px 0;
}
@media (max-width: 760px) { .ext-steps { grid-template-columns: 1fr; } }
.ext-step {
display: flex; gap: 12px; align-items: flex-start;
padding: 13px 14px; border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.ext-step__num {
flex: none; width: 28px; height: 28px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary-soft); color: var(--color-primary-dark);
font-weight: 800; font-size: 14px;
}
.ext-step__title { font-weight: 700; display: block; margin-bottom: 3px; }
.ext-step p { margin: 0; font-size: 13px; color: var(--color-muted); }
.ext-step code { font-size: 12.5px; }
.ext-step .btn-sm { margin-left: 6px; vertical-align: middle; }
.ext-browsers { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ext-browser {
padding: 11px 14px; border-radius: var(--radius-md);
border: 1px solid var(--color-border); background: var(--color-surface);
}
.ext-browser__head {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 6px 14px;
}
.ext-browser__name { font-weight: 700; }
.ext-browser__url { display: inline-flex; align-items: center; white-space: nowrap; }
.ext-browser__url code { font-size: 12.5px; }
.ext-browser__url .btn-sm { margin-left: 6px; }
.ext-browser__hint { margin: 4px 0 0; font-size: 13px; color: var(--color-muted); }
.ext-note {
margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}
.ext-note--muted { background: var(--color-surface-soft); }
.ext-note__title { display: block; font-weight: 700; margin-bottom: 6px; }
.ext-note ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ext-note li,
.ext-note p { font-size: 13px; color: var(--color-muted); }
.ext-note p { margin: 8px 0 0; }
.ext-note code { font-size: 12.5px; }
.ext-lineup { margin-top: 14px; display: grid; gap: 10px; }
.ext-lineup__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ext-lineup__label { font-size: 13px; font-weight: 700; color: var(--color-heading); }
.ext-lineup__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ext-lineup__chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--color-success) 35%, var(--color-border));
background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface));
font-size: 13px; font-weight: 650;
}
.ext-lineup__chip svg { flex: none; width: 12px; height: 12px; color: var(--color-success); }
.ext-lineup__note {
margin: 0; padding: 10px 12px; border-radius: var(--radius-md);
background: var(--color-surface-soft); font-size: 13px; color: var(--color-muted);
}
.ext-lineup__note b { color: var(--color-heading); }
.install-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.install-step {
display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.install-step__head { display: flex; gap: 12px; align-items: flex-start; }
.install-step__num {
flex: none; width: 28px; height: 28px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary-soft); color: var(--color-primary-dark);
font-weight: 800; font-size: 14px;
}
.install-step__title { font-weight: 700; display: block; margin-bottom: 3px; }
.install-step__head > div { min-width: 0; }
.install-step p { margin: 0; max-width: 78ch; font-size: 13px; color: var(--color-muted); }
.install-step p b { color: var(--color-text); font-weight: 700; }
.install-step__frame {
padding: 8px; border-radius: 12px; background: #FFFFFF;
border: 1px solid var(--color-border-strong);
box-shadow: 0 1px 2px rgba(12, 14, 18, .08);
overflow-x: auto; overscroll-behavior-x: contain;
}
.install-step__frame img,
.install-step__frame svg {
display: block; width: 100%; min-width: 520px; height: auto; border-radius: 6px;
}
@media (max-width: 860px) {
.install-step__frame--right { direction: rtl; }
.install-step__frame--right > * { direction: ltr; }
}
.agent-statefilter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.agent-chip {
display: inline-flex; align-items: center; gap: 7px;
height: var(--control-h-sm); padding: 0 12px; border-radius: 999px;
border: 1px solid var(--color-border); background: var(--color-surface);
color: var(--color-text); font-weight: 650; font-size: 13px; cursor: pointer;
transition: border-color .15s var(--ease), background .15s var(--ease);
}
.agent-chip:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.agent-chip.is-active {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
color: var(--color-primary-dark);
}
.agent-chip__n {
min-width: 18px; padding: 0 5px; border-radius: 999px; text-align: center;
font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
background: color-mix(in srgb, var(--color-muted) 16%, transparent);
color: var(--color-muted);
}
.agent-chip.is-active .agent-chip__n {
background: var(--color-primary); color: var(--color-on-primary);
}
.agent-chip.is-empty .agent-chip__n { background: var(--color-success-soft); color: var(--color-success); }
.agent-filter { margin-top: 14px; }
.agent-filter .input { width: 100%; max-width: 420px; }
.agent-card[hidden] { display: none; }
.agent-grid {
list-style: none; margin: 14px 0 0; padding: 0;
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.agent-card {
display: flex; flex-direction: column; gap: 10px;
padding: 14px; border-radius: var(--radius-md);
border: 1px solid var(--color-border); background: var(--color-surface);
}
.agent-card--installed {
border: 2px solid color-mix(in srgb, var(--color-success) 65%, transparent);
background: color-mix(in srgb, var(--color-success) 4%, var(--color-surface));
}
.agent-card--missing {
border: 2px solid color-mix(in srgb, var(--color-coral) 65%, transparent);
background: color-mix(in srgb, var(--color-coral) 4%, var(--color-surface));
}
.agent-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.agent-card__code { display: block; font-weight: 700; }
.agent-card__name { display: block; font-size: 13px; color: var(--color-muted); }
.agent-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.agent-card__meta dt { font-size: 12px; color: var(--color-muted); }
.agent-card__meta dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; }
.agent-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.agent-card__actions form { margin: 0; }
.agent-card__hint { margin: 0; font-size: 12px; color: var(--color-muted); }
.agent-card__diag {
display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-warning) 9%, var(--color-surface));
}
.agent-card__diag .badge { justify-self: start; }
.agent-card__diag p { margin: 0; font-size: 13px; }
.agent-card__meta .agent-card__meta-wide { grid-column: 1 / -1; }
.agent-card__meta .agent-card__note { display: block; margin-top: 4px; font-weight: 400; font-size: 12px; color: var(--color-muted); }
.offset-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.offset-kind--claim { color: var(--color-primary-dark); }
.offset-kind--fine { color: var(--color-coral); }
.turnover-pvz { border-top: 1px solid var(--color-border); }
.turnover-pvz:first-of-type { border-top: 0; }
.turnover-pvz__head {
display: flex; align-items: center; gap: 12px; padding: 12px 6px;
cursor: pointer; list-style: none; border-radius: var(--radius-md);
}
.turnover-pvz__head::-webkit-details-marker { display: none; }
.turnover-pvz__head:hover { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.turnover-pvz__chevron { color: var(--color-muted); flex: none; transition: transform .18s var(--ease); }
.turnover-pvz__chevron svg { width: 16px; height: 16px; display: block; }
.turnover-pvz[open] > .turnover-pvz__head .turnover-pvz__chevron { transform: rotate(90deg); }
.turnover-pvz__title { font-weight: 650; }
.turnover-pvz__address { font-size: 12.5px; color: var(--color-muted); }
.turnover-pvz__meta { margin-left: auto; text-align: right; white-space: nowrap; }
.turnover-pvz__total { font-weight: 700; }
.turnover-pvz__total--negative { color: var(--color-coral); }
.turnover-pvz__count { font-size: 12px; color: var(--color-muted); }
.turnover-pvz__body { padding: 0 6px 14px; }
.turnover-pvz__prev { margin: 0 0 10px; font-size: 12.5px; }
.turnover-pvz__share {
display: block; width: 96px; height: 4px; margin: 5px 0 0 auto;
border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 14%, transparent);
overflow: hidden;
}
.turnover-pvz__share span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--color-primary); }
.tw-period { color: var(--color-primary-dark); font-weight: 700; }
.delta-chip {
display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap;
font-variant-numeric: tabular-nums; vertical-align: middle;
}
.delta-chip--up { background: var(--color-success-soft); color: var(--color-success); }
.delta-chip--down { background: var(--color-coral-soft); color: var(--color-coral); }
.delta-chip--flat { background: color-mix(in srgb, var(--color-muted) 14%, transparent); color: var(--color-muted); }
.metric-card__valrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.metric-card > .metric-card__valrow { margin-top: auto; }
.metric-card__valrow .metric-card__value { --metric-value-size: 21px; overflow-wrap: anywhere; }
.metric-card__value--pvz { --metric-value-size: 17px; }
.tw-verdict { border-left: 3px solid var(--color-primary); }
.tw-verdict--up { border-left-color: var(--color-success); }
.tw-verdict--down { border-left-color: var(--color-coral); }
.tw-verdict--flat { border-left-color: var(--color-muted); }
.tw-verdict--partial { border-left-color: var(--color-warning); }
.tw-verdict__head { display: flex; align-items: center; gap: 14px; }
.tw-verdict__icon {
width: 44px; height: 44px; flex: none; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.tw-verdict__icon svg { width: 22px; height: 22px; }
.tw-verdict--up .tw-verdict__icon { background: var(--color-success-soft); color: var(--color-success); }
.tw-verdict--down .tw-verdict__icon { background: var(--color-coral-soft); color: var(--color-coral); }
.tw-verdict--partial .tw-verdict__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.tw-verdict__title { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.tw-verdict__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--color-muted); }
.tw-verdict__insights { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.tw-verdict__insights li {
position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.45;
}
.tw-verdict__insights li::before {
content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px;
border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.tw-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.tw-compare__title { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.tw-compare__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--color-border); }
.tw-compare__row:first-of-type { border-top: 0; }
.tw-compare__name { flex: none; max-width: 38%; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-compare__bar { flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-muted) 12%, transparent); overflow: hidden; }
.tw-compare__bar span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; }
.tw-compare__col--up .tw-compare__bar span { background: var(--color-success); }
.tw-compare__col--down .tw-compare__bar span { background: var(--color-coral); }
.tw-compare__delta { font-size: 13px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tw-compare__col--down .tw-compare__delta { color: var(--color-coral); }
.tw-compare__col--up .tw-compare__delta { color: var(--color-success); }
.tw-compare__footer { margin: 12px 0 0; font-size: 12.5px; }
@media (max-width: 819px) {
.tw-compare { grid-template-columns: 1fr; }
.tw-compare__col--down .tw-compare__title { margin-top: 12px; }
}
.tw-recon { border-left: 3px solid var(--color-warning, var(--color-coral)); }
.tw-recon__group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.tw-recon__group:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.tw-recon__title { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
.tw-recon__group--alert .tw-recon__title { color: var(--color-coral); }
.tw-recon__hint { margin: 0 0 10px; font-size: 12.5px; max-width: 72ch; }
.tw-recon__action { margin: 10px 0 0; }
.tw-recon__codes {
display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.tw-recon__codes li a {
display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm);
background: var(--color-surface-alt); font-size: 12.5px; font-weight: 600;
color: var(--color-text); text-decoration: none;
}
.tw-recon__codes li a:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.bundle-hero {
position: relative; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
gap: 20px 36px; align-items: start;
padding: 26px 30px; border-radius: var(--radius-2xl);
background:
radial-gradient(520px 260px at 12% -30%, rgba(0, 91, 255, 0.32), transparent 66%),
radial-gradient(420px 240px at 96% 120%, rgba(241, 37, 107, 0.16), transparent 70%),
linear-gradient(135deg, #111319 0%, #141823 58%, #101728 100%);
border: 0;
color: #C7CDDA;
box-shadow: var(--shadow-soft);
}
html[data-theme="dark"] .bundle-hero {
background:
radial-gradient(520px 260px at 12% -30%, rgba(25, 109, 255, 0.28), transparent 66%),
radial-gradient(420px 240px at 96% 120%, rgba(79, 144, 255, 0.16), transparent 70%),
linear-gradient(135deg, #141416 0%, #1B1C20 58%, #151518 100%);
border-color: #2A2B31;
color: #C3C4CA;
}
.bundle-hero__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; align-self: center; }
.bundle-hero__eyebrow {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8F98AC;
}
.bundle-badge {
display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill);
font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: none;
background: rgba(255, 255, 255, 0.08); color: #B4BAC7; border: 1px solid rgba(255, 255, 255, 0.10);
}
.bundle-badge--success { background: rgba(14, 159, 93, 0.18); color: #5BD69C; border-color: rgba(14, 159, 93, 0.34); }
.bundle-badge--warning { background: rgba(199, 125, 10, 0.18); color: #E8B45C; border-color: rgba(199, 125, 10, 0.34); }
.bundle-hero__value {
font-size: clamp(30px, calc(4vw * var(--vu)), 44px); font-weight: 800; letter-spacing: -0.03em;
color: #FFFFFF; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.bundle-hero__caption { margin: 0; font-size: 13.5px; color: #A6AFC2; }
.bundle-splitbar {
display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden;
background: rgba(255, 255, 255, 0.08); margin-top: 4px;
}
.bundle-splitbar__seg { display: block; background: var(--seg); min-width: 3px; }
.bundle-splitbar__seg + .bundle-splitbar__seg { border-left: 2px solid rgba(10, 12, 18, 0.55); }
.bundle-hero__legend {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: #A6AFC2;
}
.bundle-hero__legend li { display: inline-flex; align-items: center; gap: 7px; }
.bundle-hero__legend b { color: #E8EBF2; font-weight: 700; font-variant-numeric: tabular-nums; }
.bundle-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--seg, var(--color-faint)); flex: none; }
.bundle-hero__side { display: grid; gap: 10px; align-content: start; }
.bundle-stat {
display: grid; gap: 2px; padding: 11px 14px; border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
}
.bundle-stat__label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8F98AC; }
.bundle-stat__value { font-size: 16px; font-weight: 800; color: #FFFFFF; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.bundle-stat__hint { font-size: 12px; color: #A6AFC2; }
.bundle-stat__hint--alert { color: #FF7CA8; font-weight: 600; }
html[data-theme="light"] .bundle-hero {
background:
radial-gradient(520px 260px at 12% -30%, rgba(0, 91, 255, 0.08), transparent 66%),
radial-gradient(420px 240px at 96% 120%, rgba(241, 37, 107, 0.05), transparent 70%),
var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
}
html[data-theme="light"] .bundle-hero .bundle-hero__eyebrow { color: var(--color-muted); }
html[data-theme="light"] .bundle-hero .bundle-badge { background: var(--color-surface-soft); color: var(--color-muted); border-color: var(--color-border); }
html[data-theme="light"] .bundle-hero .bundle-badge--success { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 32%, transparent); }
html[data-theme="light"] .bundle-hero .bundle-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 32%, transparent); }
html[data-theme="light"] .bundle-hero__value { color: var(--color-heading); }
html[data-theme="light"] .bundle-hero__caption { color: var(--color-muted); }
html[data-theme="light"] .bundle-hero__legend { color: var(--color-muted); }
html[data-theme="light"] .bundle-hero__legend b { color: var(--color-heading); }
html[data-theme="light"] .bundle-hero .bundle-splitbar { background: var(--color-surface-soft); }
html[data-theme="light"] .bundle-hero .bundle-splitbar__seg + .bundle-splitbar__seg { border-left-color: var(--color-surface); }
html[data-theme="light"] .bundle-hero .bundle-stat { background: var(--color-surface-alt); border-color: var(--color-border); }
html[data-theme="light"] .bundle-hero .bundle-stat__label { color: var(--color-faint); }
html[data-theme="light"] .bundle-hero .bundle-stat__value { color: var(--color-heading); }
html[data-theme="light"] .bundle-hero .bundle-stat__hint { color: var(--color-muted); }
html[data-theme="light"] .bundle-hero .bundle-stat__hint--alert { color: var(--color-coral); }
.bundle-charts { margin-top: 2px; }
.bundle-charts .card__subtitle { min-height: 3em; }
.bundle-charts .dash-widget__body > .dash-donut { margin-block: 0; }
.bundle-pvz__toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.bundle-pvz__search { max-width: 300px; min-width: 190px; }
.bundle-pvz__toggle {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
color: var(--color-muted); cursor: pointer; user-select: none;
}
.bundle-pvz__toggle input { accent-color: var(--color-primary); width: 15px; height: 15px; }
.bundle-pvz__count { margin-left: auto; font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.bundle-pvz__table th[data-bundle-sort] { cursor: pointer; user-select: none; }
.bundle-pvz__table th[data-bundle-sort]::after { content: "↕"; margin-left: 4px; opacity: .38; font-size: 11px; }
.bundle-pvz__table thead th { padding: 9px 8px; white-space: normal; min-width: 0; }
.bundle-pvz__table tbody td { padding: 11px 8px; }
.bundle-pvz__table .bundle-pvz__sub { max-width: 135px; }
.bundle-pvz__table .bundle-pvz__money { min-width: 118px; }
.bundle-pvz__addr { max-width: 150px; }
.bundle-pvz__table tbody .bundle-pvz__name,
.bundle-pvz__table thead th:first-child {
position: sticky; left: 0; z-index: 1; background: var(--color-surface);
}
.bundle-pvz__table thead th:first-child { z-index: 3; background: var(--color-surface-alt); }
.bundle-pvz__group.is-open .bundle-pvz__row .bundle-pvz__name { background: var(--color-surface-alt); }
.bundle-pvz__table th[data-bundle-sort].is-asc::after { content: "↑"; opacity: 1; color: var(--color-primary); }
.bundle-pvz__table th[data-bundle-sort].is-desc::after { content: "↓"; opacity: 1; color: var(--color-primary); }
.bundle-pvz__group[hidden] { display: none; }
.bundle-pvz__row { cursor: pointer; }
.bundle-pvz__row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.bundle-pvz__name { min-width: 180px; }
.bundle-pvz__name strong { display: block; }
.bundle-pvz__sub {
display: block; font-size: 12px; color: var(--color-muted); max-width: 260px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bundle-pvz__money { min-width: 150px; }
.bundle-pvz__amount { display: block; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bundle-pvz__track { display: block; margin-top: 4px; height: 5px; border-radius: var(--radius-pill); background: var(--color-surface-soft); overflow: hidden; max-width: 140px; }
.bundle-pvz__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-coral)); transition: width .5s var(--ease); }
.bundle-pvz__chev { width: 34px; color: var(--color-faint); }
.bundle-pvz__chev svg { transition: transform .18s var(--ease); }
.bundle-pvz__group.is-open .bundle-pvz__chev svg { transform: rotate(180deg); }
.bundle-pvz__group.is-open .bundle-pvz__row td { background: var(--color-surface-alt); }
.bundle-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap;
background: var(--color-surface-soft); color: var(--color-muted);
}
.bundle-chip b { font-variant-numeric: tabular-nums; }
.bundle-chip--clean { background: var(--color-success-soft); color: var(--color-success); }
.bundle-chip--low { background: var(--color-warning-soft); color: var(--color-warning); }
.bundle-chip--high { background: var(--color-danger-soft); color: var(--color-danger); }
.bundle-chip--claims { background: var(--color-primary-soft); color: var(--color-primary); }
.bundle-pvz__details[hidden] { display: none !important; }
.bundle-pvz__details > td { background: var(--color-surface-alt); padding: 14px 16px 18px; }
.bundle-detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px 28px; }
.bundle-detail__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); }
.bundle-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bundle-cat__head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; min-width: 0; }
.bundle-cat__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bundle-cat__section { font-size: 11.5px; color: var(--color-faint); white-space: nowrap; }
.bundle-cat__value { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bundle-cat__track { display: block; margin-top: 4px; height: 5px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-muted) 14%, transparent); overflow: hidden; }
.bundle-cat__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); }
.bundle-detail__facts { margin: 0; display: grid; gap: 8px; }
.bundle-detail__facts > div { display: grid; gap: 1px; }
.bundle-detail__facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-faint); }
.bundle-detail__facts dd { margin: 0; font-size: 13.5px; font-weight: 600; }
.bundle-detail__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bundle-meta > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bundle-meta > summary::-webkit-details-marker { display: none; }
.bundle-meta > summary::after { content: "＋"; margin-left: auto; color: var(--color-faint); font-weight: 700; }
.bundle-meta[open] > summary::after { content: "−"; }
.bundle-meta__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 28px; margin-top: 12px; }
@media (max-width: 819px) {
.bundle-hero { grid-template-columns: 1fr; }
.bundle-hero__side { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (max-width: 640px) {
.bundle-hero { padding: 20px; }
.bundle-detail { grid-template-columns: 1fr; }
.bundle-pvz__count { margin-left: 0; width: 100%; }
}
.eco-months { margin-bottom: 4px; }
.eco-months .chip { text-decoration: none; }
.eco-months__mark { color: var(--color-warning); font-size: 11px; }
.eco-months .chip.is-active .eco-months__mark { color: currentColor; opacity: .75; }
.eco-sharebar { max-width: 460px; height: 10px; }
.eco-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-share { font-weight: 800; font-variant-numeric: tabular-nums; }
.eco-share--ok { color: var(--color-success); }
.eco-share--warn { color: var(--color-warning); }
.eco-share--high { color: var(--color-danger); }
.bundle-chip--ok { background: var(--color-success-soft); color: var(--color-success); }
.bundle-chip--warn { background: var(--color-warning-soft); color: var(--color-warning); }
.bundle-chip--nodata { background: var(--color-surface-soft); color: var(--color-faint); }
.eco-hero {
position: relative; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 28px;
padding: 28px 30px; margin-bottom: 16px;
border: 1px solid var(--color-border); border-radius: var(--radius-2xl);
background:
radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%),
var(--color-surface);
}
.eco-hero__glow {
position: absolute; inset: auto -80px -120px auto; width: 320px; height: 320px; border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 26%, transparent), transparent 70%);
filter: blur(10px); pointer-events: none; opacity: .5;
}
.eco-hero__main, .eco-hero__side { position: relative; display: grid; gap: 12px; min-width: 0; }
.eco-hero__main { align-content: space-between; }
.eco-hero__side { align-content: start; }
.eco-hero__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eco-hero__period { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.eco-hero__source { font-size: 12.5px; color: var(--color-faint); }
.eco-hero__value {
font-size: clamp(34px, calc(4.4vw * var(--vu)), 56px); font-weight: 800; line-height: 1.02; letter-spacing: -.02em;
color: var(--color-heading); font-variant-numeric: tabular-nums;
}
.eco-hero__caption { margin: 0; font-size: 13.5px; color: var(--color-muted); }
.eco-mrows { display: grid; gap: 8px; }
.eco-mrows__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.eco-mrows__title { font-size: 12px; font-weight: 700; color: var(--color-muted); }
.eco-mrows__hint { font-size: 11px; color: var(--color-faint); }
.eco-mrows__list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.eco-mrow {
display: grid; grid-template-columns: 92px minmax(40px, 1fr) auto 62px;
gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm);
font-size: 12.5px; transition: background .16s var(--ease);
}
.eco-mrow:hover { background: var(--color-surface-soft); }
.eco-mrow__month { color: var(--color-muted); white-space: nowrap; }
.eco-mrow__partial { margin-left: 4px; color: var(--color-warning); font-size: 11px; }
.eco-mrow__track { display: block; height: 8px; border-radius: 999px; background: var(--color-surface-soft); overflow: hidden; }
.eco-mrow__fill { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--color-primary) 55%, transparent); transform-origin: left center; }
.eco-mrow--best .eco-mrow__fill { background: var(--color-primary); }
.eco-mrow__value { font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-mrow__delta { font-size: 12px; text-align: right; }
.eco-flow { display: grid; gap: 10px; margin-top: 6px; }
.eco-flow__bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--color-surface-soft); }
.eco-flow__seg { display: block; height: 100%; transform-origin: left center; }
.eco-flow__seg--success { background: var(--color-success); }
.eco-flow__seg--coral { background: var(--color-danger); }
.eco-flow__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--color-muted); }
.eco-flow__legend b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.eco-facts { display: grid; gap: 8px; list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--color-border); }
.eco-facts li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; font-size: 13px; }
.eco-facts span { color: var(--color-muted); }
.eco-facts b { color: var(--color-text); font-variant-numeric: tabular-nums; text-align: right; }
.eco-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1200px) { .eco-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eco-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eco-kpi {
position: relative; overflow: hidden; display: grid; gap: 4px; align-content: start;
padding: 16px 18px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.eco-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.eco-kpi::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--color-border-strong); }
.eco-kpi--primary::after { background: var(--color-primary); }
.eco-kpi--success::after { background: var(--color-success); }
.eco-kpi--warning::after { background: var(--color-warning); }
.eco-kpi--danger::after { background: var(--color-danger); }
.eco-kpi__label { font-size: 12px; font-weight: 700; color: var(--color-muted); }
.eco-kpi__value { font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.eco-kpi__sub { font-size: 12px; color: var(--color-faint); min-height: 30px; }
.eco-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 6px; }
.eco-bar { flex: 0 0 9px; border-radius: 2px 2px 0 0; background: var(--color-primary); opacity: .32; transform-origin: bottom center; }
.eco-bar--last { opacity: 1; }
.eco-kpi--danger .eco-bar { background: var(--color-danger); }
.eco-kpi--warning .eco-bar { background: var(--color-warning); }
.eco-kpi--success .eco-bar { background: var(--color-success); }
.eco-stages__bar { height: 14px; margin-bottom: 12px; }
.eco-rank { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.eco-rank__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "code value" "sub sub" "bar bar";
column-gap: 14px; row-gap: 5px; align-items: baseline;
}
.eco-rank__code { grid-area: code; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--color-heading); }
.eco-rank__code a { color: inherit; text-decoration: none; }
.eco-rank__code a:hover { color: var(--color-primary); }
.eco-rank__sub { grid-area: sub; font-size: 12px; font-weight: 500; color: var(--color-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-rank__bar { grid-area: bar; align-self: center; display: block; margin-top: 2px; height: 6px; border-radius: 999px; background: var(--color-surface-soft); overflow: hidden; }
.eco-rank__fill { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); transform-origin: left center; }
.eco-rank--alert .eco-rank__fill { background: var(--color-danger); }
.eco-rank__value { grid-area: value; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eco-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
.eco-delta--up { color: var(--color-success); }
.eco-delta--down { color: var(--color-danger); }
.eco-delta--flat { color: var(--color-faint); }
.eco-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.eco-cols--ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eco-cols > .card { margin-bottom: 0; }
.eco-alerts { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.eco-alert { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-surface-soft); transition: background .16s var(--ease); }
.eco-alert:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-soft)); }
.eco-alert__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.eco-alert--danger .eco-alert__dot { background: var(--color-danger); }
.eco-alert--warning .eco-alert__dot { background: var(--color-warning); }
.eco-alert__body { display: grid; gap: 2px; min-width: 0; }
.eco-alert__title { font-size: 13.5px; color: var(--color-heading); }
.eco-alert__sub { font-size: 12.5px; color: var(--color-muted); }
.eco-doclist { display: grid; gap: 10px; list-style: none; margin: 0 0 12px; padding: 0; }
.eco-doc { display: grid; gap: 2px; }
.eco-doc__title { font-size: 13.5px; font-weight: 700; color: var(--color-heading); text-decoration: none; }
.eco-doc__title:hover { color: var(--color-primary); }
.eco-doc__sub { font-size: 12.5px; color: var(--color-muted); }
.eco-docs__foot { font-size: 12.5px; color: var(--color-faint); margin: 0 0 12px; }
[data-eco-page] { display: flex; flex-direction: column; gap: 16px; }
[data-eco-page] > * { margin-block: 0; }
.eco-more { padding: 16px 18px; }
.eco-more__summary {
display: flex; align-items: center; gap: 9px; cursor: pointer;
font-weight: 700; color: var(--color-muted); list-style: none; user-select: none;
}
.eco-more__summary::-webkit-details-marker { display: none; }
.eco-more__summary:hover { color: var(--color-heading); }
.eco-more__summary svg { width: 16px; height: 16px; flex: none; transition: transform .18s var(--ease); }
.eco-more[open] .eco-more__summary { margin-bottom: 14px; color: var(--color-heading); }
.eco-more[open] .eco-more__summary svg { transform: rotate(180deg); }
.eco-more__count { color: var(--color-faint); font-weight: 600; }
.eco-more .dash-cards { margin-bottom: 0; }
[data-eco-motion] [data-eco-reveal] { opacity: 0; transform: translateY(14px); }
[data-eco-motion] [data-eco-reveal].is-in {
opacity: 1; transform: none;
transition: opacity .5s var(--ease) calc(var(--i, 0) * 60ms), transform .5s var(--ease) calc(var(--i, 0) * 60ms);
}
[data-eco-motion] .eco-flow__seg,
[data-eco-motion] .eco-rank__fill,
[data-eco-motion] .eco-mrow__fill,
[data-eco-motion] .eco-stages__bar .bundle-splitbar__seg { transform: scaleX(0); }
[data-eco-motion] .is-in .eco-flow__seg,
[data-eco-motion] .is-in .eco-rank__fill,
[data-eco-motion] .is-in .eco-mrow__fill,
[data-eco-motion] .is-in.eco-stages .bundle-splitbar__seg { transform: scaleX(1); transition: transform .8s var(--ease); }
[data-eco-motion] .eco-bar { transform: scaleY(0); }
[data-eco-motion] .is-in .eco-bar { transform: scaleY(1); transition: transform .55s var(--ease); }
@media (prefers-reduced-motion: reduce) {
[data-eco-motion] [data-eco-reveal],
[data-eco-motion] .eco-flow__seg,
[data-eco-motion] .eco-rank__fill,
[data-eco-motion] .eco-mrow__fill,
[data-eco-motion] .eco-stages__bar .bundle-splitbar__seg { opacity: 1; transform: none; transition: none; }
[data-eco-motion] .eco-bar { transform: none; }
}
@media (max-width: 864px) {
.eco-hero { grid-template-columns: 1fr; padding: 22px; }
.eco-cols, .eco-cols--ranks { grid-template-columns: 1fr; }
}
.eco-tabs, .hub-tabs {
display: flex; gap: 4px; padding: 5px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.eco-tabs::-webkit-scrollbar, .hub-tabs::-webkit-scrollbar { display: none; }
.eco-tabs__tab, .hub-tabs__tab { flex: none; }
.eco-tabs__tab, .hub-tabs__tab {
padding: 9px 18px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 700;
color: var(--color-text); text-decoration: none; white-space: nowrap;
transition: background-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.eco-tabs__tab:hover, .hub-tabs__tab:hover { color: var(--color-heading); background: var(--color-surface-soft); }
.eco-tabs__tab.is-active, .hub-tabs__tab.is-active {
background: var(--color-primary); color: var(--color-on-primary);
box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 38%, transparent);
}
.eco-tabs__tab.is-active:hover, .hub-tabs__tab.is-active:hover {
background: var(--color-primary-strong); color: var(--color-on-primary);
box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 46%, transparent);
}
html[data-theme="dark"] .eco-tabs__tab.is-active,
html[data-theme="dark"] .hub-tabs__tab.is-active { background: var(--color-primary-strong); }
.hub-tabs { margin-bottom: 16px; max-width: 100%; overflow-x: auto; }
.doc-delete { width: 1%; white-space: nowrap; text-align: right; }
.doc-delete form { display: inline; }
.doc-delete__btn { color: var(--color-danger); }
.doc-delete__btn:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.impdel__list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.impdel__item {
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface);
display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px;
}
.impdel__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.impdel__act { flex: none; }
.impdel__name { font-weight: 700; font-size: 14px; color: var(--color-heading); }
.impdel__hint { font-size: 12.5px; color: var(--color-muted); }
.impdel__warn { font-size: 12.5px; color: var(--color-danger); }
.impdel__none { margin: 10px 0 0; font-size: 12.5px; color: var(--color-muted); }
.impdel__keep { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.impdel__keep-line { margin: 0; font-size: 12.5px; color: var(--color-muted); }
.impdel__go { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.impdel__go-hint { font-size: 12.5px; color: var(--color-muted); }
@media (max-width: 640px) {
.impdel__item { flex-direction: column; align-items: stretch; }
.impdel__act .btn { width: 100%; }
}
.bundle-cta .card__head { align-items: center; }
.row-link { cursor: pointer; }
.row-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
tr.row-link { transition: background .14s var(--ease); }
tr.row-link td:first-child a { position: relative; z-index: 1; }
.pvz-cell { display: block; min-width: 0; }
.pvz-cell__address { display: block; font-weight: 700; }
.pvz-cell__code { display: block; margin-top: 2px; font-size: 12px; color: var(--color-muted); }
.table-cell-pvz { max-width: 260px; min-width: 160px; }
.eco-months-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 4px; }
.eco-months-bar .eco-months { margin-bottom: 0; }
.eco-months { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.eco-months::-webkit-scrollbar { display: none; }
.eco-months .chip { flex: none; }
.eco-period {
display: flex; align-items: center; gap: 6px;
padding: 5px 6px 5px 14px; border-radius: var(--radius-pill);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-xs);
}
.eco-period__label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-faint); }
.eco-period__dash { color: var(--color-faint); }
.eco-period .input {
width: auto; min-width: 118px; padding: 7px 32px 7px 13px; font-size: 13px; font-weight: 600;
border: 0; background-color: var(--color-surface-soft); border-radius: var(--radius-pill);
}
.eco-period .btn { border-radius: var(--radius-pill); }
@media (max-width: 640px) {
.eco-months-bar { align-items: stretch; }
.eco-period {
flex-wrap: wrap; width: 100%; padding: 10px 12px;
border-radius: var(--radius-lg); row-gap: 8px;
}
.eco-period__label { flex: 1 0 100%; }
.eco-period .input { flex: 1 1 40%; min-width: 0; }
.eco-period .btn { flex: 1 0 100%; }
}
.formula-hero {
position: relative; overflow: hidden; display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr); gap: clamp(20px, calc(3vw * var(--vu)), 40px);
margin-bottom: 20px; padding: clamp(22px, calc(4vw * var(--vu)), 38px);
border: 1px solid var(--color-border); border-radius: var(--radius-2xl);
background: var(--color-surface); box-shadow: var(--shadow-soft);
}
.formula-hero::before {
content: ""; position: absolute; width: 480px; height: 480px; right: -240px; top: -280px;
border-radius: 50%; background: var(--color-primary-soft); pointer-events: none;
}
.formula-hero > * { position: relative; }
.formula-hero__content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.formula-hero__eyebrow {
margin-bottom: 10px; color: var(--color-primary-dark);
font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.formula-hero__title { max-width: 640px; font-size: clamp(26px, calc(3.4vw * var(--vu)), 38px); line-height: 1.12; letter-spacing: -.03em; }
.formula-hero__text { max-width: 600px; margin-top: 12px; color: var(--color-muted); font-size: 14px; line-height: 1.55; }
.formula-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.formula-hero__aside {
display: flex; flex-direction: column; gap: 14px; align-self: center;
padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-xl);
background: color-mix(in srgb, var(--color-surface-alt) 82%, transparent);
backdrop-filter: blur(4px);
}
.formula-hero__aside-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.formula-hero__steps { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }
.formula-hero__step { display: flex; gap: 11px; }
.formula-hero__step-num {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
background: var(--color-primary-soft); color: var(--color-primary-dark);
font-size: 12.5px; font-weight: 800;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.formula-hero__step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.formula-hero__step-body strong { font-size: 13px; }
.formula-hero__step-body span { color: var(--color-muted); font-size: 12px; line-height: 1.45; }
.formula-hero__step-body a { color: var(--color-primary-dark); font-weight: 700; }
.formula-hero__step-body a:hover { text-decoration: underline; }
.formula-section { margin-top: 26px; }
.formula-section__head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px;
margin-bottom: 15px;
}
.formula-section__head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.formula-section__eyebrow { color: var(--color-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.formula-section__title { font-size: 21px; letter-spacing: -.02em; }
.formula-section__text { max-width: 720px; margin-top: 3px; color: var(--color-muted); font-size: 12.5px; line-height: 1.5; }
.formula-active-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.formula-active-card {
position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
padding: 20px 20px 20px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-xl);
background: var(--color-surface); box-shadow: var(--shadow-card);
transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.formula-active-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.formula-active-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.formula-active-card--payroll::before { background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 45%, transparent)); }
.formula-active-card--kpi::before { background: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 45%, transparent)); }
.formula-active-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.formula-active-card__icon {
display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
padding: 0 10px; border-radius: 13px; font-size: 15px; font-weight: 850;
background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.formula-active-card--kpi .formula-active-card__icon { background: var(--color-success-soft); color: var(--color-success); font-size: 12.5px; }
.formula-active-card__kind { color: var(--color-muted); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.formula-active-card__title { margin-top: 3px; font-size: 18px; letter-spacing: -.015em; }
.formula-active-card__text { margin-top: 6px; color: var(--color-muted); font-size: 12.5px; line-height: 1.5; }
.formula-active-card__facts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.formula-active-card__facts span {
padding: 6px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
background: var(--color-surface-soft); color: var(--color-muted); font-size: 11.5px;
}
.formula-active-card__facts b { color: var(--color-text); font-weight: 750; }
.formula-template-block { margin-top: 18px; }
.formula-template-block:first-of-type { margin-top: 0; }
.formula-template-block__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.formula-template-block__head h3 { font-size: 15px; letter-spacing: -.01em; }
.formula-template-block__head span { color: var(--color-muted); font-size: 12px; }
.formula-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 13px; }
.formula-template-card {
display: flex; flex-direction: column; gap: 9px; padding: 17px;
border: 1px solid var(--color-border); border-radius: var(--radius-xl);
background: var(--color-surface); box-shadow: var(--shadow-card);
transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.formula-template-card:hover {
transform: translateY(-2px); box-shadow: var(--shadow-soft);
border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
}
.formula-template-card--kpi:hover { border-color: color-mix(in srgb, var(--color-success) 38%, var(--color-border)); }
.formula-template-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.formula-template-card__badge {
padding: 4px 10px; border-radius: var(--radius-pill);
background: var(--color-primary-soft); color: var(--color-primary-dark);
font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.formula-template-card--kpi .formula-template-card__badge { background: var(--color-success-soft); color: var(--color-success); }
.formula-template-card__mark { color: var(--color-faint); font-size: 13px; font-weight: 850; }
.formula-template-card h3 { font-size: 15.5px; letter-spacing: -.01em; }
.formula-template-card > p { color: var(--color-muted); font-size: 12px; line-height: 1.5; }
.formula-template-card__facts { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.formula-template-card__facts li { position: relative; padding-left: 16px; color: var(--color-muted); font-size: 11.5px; }
.formula-template-card__facts li::before {
content: "✓"; position: absolute; left: 0; top: 0;
color: var(--color-success); font-size: 11px; font-weight: 800;
}
.formula-template-card__action { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 8px; }
.formula-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.formula-library__group {
overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl);
background: var(--color-surface); box-shadow: var(--shadow-card);
}
.formula-library__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 17px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-alt);
}
.formula-library__head > div { display: flex; align-items: center; gap: 10px; }
.formula-library__head h3 { font-size: 14.5px; }
.formula-library__icon {
display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
padding: 0 8px; border-radius: 10px; font-size: 13px; font-weight: 850;
background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.formula-library__icon--kpi { background: var(--color-success-soft); color: var(--color-success); font-size: 10.5px; }
.formula-library__count { color: var(--color-muted); font-size: 11.5px; font-weight: 650; }
.formula-profile-list { display: flex; flex-direction: column; }
.formula-profile-card {
display: flex; align-items: center; justify-content: space-between; gap: 12px 18px;
padding: 14px 17px; border-bottom: 1px solid var(--color-border);
transition: background .16s var(--ease);
}
.formula-profile-card:last-child { border-bottom: 0; }
.formula-profile-card:hover { background: var(--color-surface-alt); }
.formula-profile-card--active { background: color-mix(in srgb, var(--color-primary-soft) 45%, transparent); }
.formula-profile-card--active:hover { background: color-mix(in srgb, var(--color-primary-soft) 65%, transparent); }
.formula-profile-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.formula-profile-card__title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.formula-profile-card__title { color: var(--color-heading); font-size: 13.5px; font-weight: 750; }
.formula-profile-card__title:hover { color: var(--color-primary-dark); }
.formula-profile-card__body > p { color: var(--color-muted); font-size: 11.5px; line-height: 1.45; }
.formula-profile-card__meta { display: flex; gap: 5px 12px; flex-wrap: wrap; color: var(--color-faint); font-size: 11px; }
.formula-profile-card__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.formula-profile-card__archive { color: var(--color-danger); }
.formula-empty-inline { padding: 18px 17px; color: var(--color-muted); font-size: 12.5px; }
.formula-builder-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
margin-bottom: 16px;
}
.formula-builder-head__main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.formula-builder-head__back { align-self: flex-start; color: var(--color-muted); font-size: 12.5px; font-weight: 650; }
.formula-builder-head__back:hover { color: var(--color-primary-dark); }
.formula-builder-head__title-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.formula-builder-head__title-row .page__title { overflow-wrap: anywhere; }
.formula-builder-head__mark { width: 46px; height: 46px; border-radius: 14px; }
.formula-builder-head__title-row > div { min-width: 0; }
.formula-version-bar { align-items: center; box-shadow: var(--shadow-card); }
.formula-version-bar__note { display: flex; flex: 1 1 280px; flex-direction: column; gap: 2px; min-width: 0; }
.formula-version-bar__note strong { font-size: 12.5px; }
.formula-version-bar__note span { color: var(--color-muted); font-size: 11.5px; }
.formula-step-card { padding: 20px; }
.formula-step-card .fstep { padding-bottom: 2px; }
.formula-step-card .fstep__num { width: 30px; height: 30px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.formula-step-card .fstep__title { font-size: 17px; }
.formula-step-card .fstep__hint { max-width: 850px; }
.formula-profile-fields { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(280px, 1.2fr); gap: 14px; }
.formula-profile-fields textarea.input { min-height: 78px; resize: vertical; }
.formula-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.formula-toggle-card {
display: flex; align-items: flex-start; gap: 11px; padding: 14px;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface-soft); cursor: pointer;
transition: border-color .18s var(--ease), background .18s var(--ease);
}
.formula-toggle-card:hover { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); }
.formula-toggle-card:has(input:checked) { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); background: var(--color-primary-soft); }
.formula-toggle-card__control input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-primary); }
.formula-toggle-card__body { display: flex; flex-direction: column; gap: 3px; }
.formula-toggle-card__body strong { font-size: 13.5px; }
.formula-toggle-card__body span { color: var(--color-muted); font-size: 12px; line-height: 1.4; }
.formula-inline-note { padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-info-soft); color: var(--color-muted); font-size: 12px; }
.formula-inline-note a { color: var(--color-primary-dark); font-weight: 700; }
.formula-input-suffix { position: relative; display: flex; align-items: stretch; }
.formula-input-suffix .input { width: 100%; padding-right: 44px; }
.formula-input-suffix > span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--color-muted); font-size: 12px; font-weight: 700; pointer-events: none; }
.formula-save-bar { border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); box-shadow: 0 -8px 26px color-mix(in srgb, var(--color-bg-deep) 65%, transparent); }
@media (min-width: 928px) {
.fbuild { grid-template-columns: minmax(0, 1fr) minmax(320px, 365px); }
}
.formula-preview { gap: 13px !important; overflow: hidden; }
.formula-preview__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.formula-preview__head > div { display: flex; flex-direction: column; gap: 3px; }
.formula-preview__intro { color: var(--color-muted); font-size: 12px; line-height: 1.45; }
.formula-preview__result {
margin-inline: -2px; padding: 15px; border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface-alt));
}
.formula-preview__result .kpi-sim__score { font-size: 36px; }
.formula-preview__label { color: var(--color-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.formula-preview-check {
display: flex; align-items: flex-start; gap: 9px; padding: 10px;
border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-soft); cursor: pointer;
}
.formula-preview-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--color-primary); }
.formula-preview-check > span { display: flex; flex-direction: column; gap: 2px; }
.formula-preview-check strong { font-size: 12px; }
.formula-preview-check small { color: var(--color-muted); font-size: 10.5px; line-height: 1.35; }
.formula-preview__breakdown { display: flex; flex-direction: column; gap: 4px; }
.formula-preview__disclaimer {
padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface-soft); color: var(--color-muted); font-size: 10.5px; line-height: 1.45;
}
.formula-plain-card { gap: 10px !important; }
.formula-score-grid { padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); }
.formula-metric-list .frule { background: var(--color-surface-alt); }
.formula-metric-switch { position: relative; display: inline-flex; margin-top: 1px; cursor: pointer; }
.formula-metric-switch input { position: absolute; opacity: 0; pointer-events: none; }
.formula-metric-switch span {
position: relative; width: 36px; height: 21px; border-radius: var(--radius-pill);
background: var(--color-border-strong); transition: background .18s var(--ease);
}
.formula-metric-switch span::after {
content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px;
border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-xs);
transition: transform .18s var(--ease);
}
.formula-metric-switch input:checked + span { background: var(--color-primary); }
.formula-metric-switch input:checked + span::after { transform: translateX(15px); }
.formula-metric-switch input:focus-visible + span { box-shadow: var(--ring); }
.kstep { gap: 16px !important; }
.kstep .fstep { align-items: center; }
.kstep__expand { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.kstep__note { color: var(--color-muted); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 700px) {
.kstep .fstep { flex-wrap: wrap; }
.kstep__expand { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; }
}
.kpreset { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.kpreset__card {
position: relative; display: flex; flex-direction: column; gap: 5px;
padding: 17px 16px 16px; text-align: left; cursor: pointer;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface-soft); color: inherit;
transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.kpreset__card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.kpreset__card:focus-visible { outline: none; box-shadow: var(--ring); }
.kpreset__card.is-active {
border-color: var(--color-primary); background: var(--color-primary-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.kpreset__card.is-active::after {
content: "✓"; position: absolute; top: 12px; right: 13px;
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: var(--color-primary); color: var(--color-on-primary); font-size: 11px; font-weight: 800;
}
.kpreset__badge {
align-self: flex-start; margin-bottom: 2px; padding: 3px 8px; border-radius: var(--radius-pill);
background: var(--color-primary-soft); color: var(--color-primary-dark);
font-size: 9.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
}
.kpreset__mark { display: grid; place-items: center; width: 26px; height: 26px; color: var(--color-primary); }
.kpreset__mark svg { width: 24px; height: 24px; }
.kpreset__name { font-size: 15px; font-weight: 750; color: var(--color-heading); }
.kpreset__text { color: var(--color-muted); font-size: 12px; line-height: 1.45; }
.kgroup { display: flex; flex-direction: column; gap: 9px; }
.kgroup__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kgroup__title {
margin: 0; font-size: 10.5px; font-weight: 850; letter-spacing: .07em;
text-transform: uppercase; color: var(--color-primary-dark);
}
.kgroup__hint { color: var(--color-muted); font-size: 11.5px; }
.kgroup__list { display: flex; flex-direction: column; gap: 8px; }
.kmet {
display: flex; flex-direction: column; gap: 9px; padding: 13px 15px;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface-alt); transition: border-color .18s var(--ease), opacity .18s var(--ease);
}
.kmet:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
.kmet--off { opacity: .58; }
.kmet--off .kmet__level { visibility: hidden; }
.kmet__main { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.kmet__text { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kmet__name { font-size: 14px; font-weight: 700; color: var(--color-heading); }
.kmet__hint { color: var(--color-muted); font-size: 11.5px; line-height: 1.4; }
.kmet__switch { position: relative; display: inline-flex; margin-top: 2px; flex: 0 0 auto; cursor: pointer; }
.kmet__switch input { position: absolute; opacity: 0; pointer-events: none; }
.kmet__switch > span[aria-hidden] {
position: relative; width: 36px; height: 21px; border-radius: var(--radius-pill);
background: var(--color-border-strong); transition: background .18s var(--ease);
}
.kmet__switch > span[aria-hidden]::after {
content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px;
border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-xs);
transition: transform .18s var(--ease);
}
.kmet__switch input:checked + span[aria-hidden] { background: var(--color-primary); }
.kmet__switch input:checked + span[aria-hidden]::after { transform: translateX(15px); }
.kmet__switch input:focus-visible + span[aria-hidden] { box-shadow: var(--ring); }
.kmet__level {
display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; padding: 3px;
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
background: var(--color-surface);
}
.kmet__lvl {
padding: 5px 12px; border: 0; border-radius: var(--radius-pill); background: transparent;
color: var(--color-muted); font-size: 11.5px; font-weight: 700; cursor: pointer;
transition: background .16s var(--ease), color .16s var(--ease);
}
.kmet__lvl:hover { color: var(--color-heading); background: var(--color-surface-soft); }
.kmet__lvl:focus-visible { outline: none; box-shadow: var(--ring); }
.kmet__lvl.is-active { background: var(--color-primary); color: var(--color-on-primary); }
.kmet__lvl--own { color: var(--color-warning); }
.kmet__lvl--own.is-active { background: var(--color-warning-soft); color: var(--color-warning); }
.kmet__lvl--own:hover { background: var(--color-warning-soft); color: var(--color-warning); }
.kmet__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kmet__sentence { flex: 1 1 200px; color: var(--color-muted); font-size: 12px; line-height: 1.4; }
.kmet__more {
flex: 0 0 auto; padding: 0; border: 0; background: transparent;
color: var(--color-primary-dark); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.kmet__more:hover { text-decoration: underline; }
.kmet__more:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm, 6px); }
.kmet__adv {
padding-top: 11px; border-top: 1px dashed var(--color-border);
}
.kbonus { display: flex; flex-direction: column; gap: 8px; }
.kbonus__row {
display: grid; gap: 11px 14px; padding: 13px 15px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "name flags" "range pay";
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface-alt);
}
.kbonus__row--new { border-style: dashed; background: transparent; }
.kbonus__row:has(.fcheck--danger input:checked) { opacity: .5; border-color: var(--color-danger); }
.kbonus__name { grid-area: name; }
.kbonus__flags { grid-area: flags; }
.kbonus__range { grid-area: range; }
.kbonus__pay { grid-area: pay; }
.kbonus__row > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kbonus__row .input { width: 100%; min-width: 0; }
.kbonus__row .fpair .input { flex: 1 1 0; min-width: 74px; text-align: center; }
.kbonus__row .field__label { font-size: 11.5px; }
.kbonus__flags { flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 14px !important; }
@media (max-width: 640px) {
.kbonus__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "flags" "range" "pay"; }
.kbonus__flags { justify-content: flex-start; }
}
.kextra { border-radius: var(--radius-lg); }
.kextra__summary {
display: flex; flex-direction: column; gap: 2px; padding: 3px 0; cursor: pointer; list-style: none;
}
.kextra__summary::-webkit-details-marker { display: none; }
.kextra__title { font-size: 15px; font-weight: 700; color: var(--color-heading); }
.kextra__title::after { content: " ▾"; color: var(--color-muted); font-size: 12px; }
.kextra[open] .kextra__title::after { content: " ▴"; }
.kextra__hint { color: var(--color-muted); font-size: 12.5px; }
.kextra__body { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.ksim__summary {
padding: 3px 0; color: var(--color-primary-dark); font-size: 12px; font-weight: 700;
cursor: pointer; list-style: none;
}
.ksim__summary::-webkit-details-marker { display: none; }
.ksim__summary::after { content: " ▾"; }
.ksim[open] .ksim__summary::after { content: " ▴"; }
.ksim__grid { padding-top: 10px; }
.payroll-cab-hero {
position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .65fr);
gap: 24px; margin-bottom: 28px; padding: clamp(22px, calc(4vw * var(--vu)), 38px);
border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft);
background: var(--color-surface);
}
.payroll-cab-hero::before {
content: ""; position: absolute; width: 420px; height: 420px; left: -230px; top: -250px;
border-radius: 50%; background: var(--color-primary-soft); pointer-events: none;
}
.payroll-cab-hero--published { border-color: color-mix(in srgb, var(--color-success) 24%, var(--color-border)); }
.payroll-cab-hero--published::before { background: var(--color-success-soft); }
.payroll-cab-hero > * { position: relative; }
.payroll-cab-hero__main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.payroll-cab-hero__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.payroll-cab-hero__period { margin-bottom: 22px; font-size: 18px; }
.payroll-cab-hero__label { color: var(--color-muted); font-size: 12.5px; font-weight: 650; }
.payroll-cab-hero__amount { margin-top: 2px; font-size: clamp(40px, calc(7vw * var(--vu)), 62px); line-height: 1; color: var(--color-heading); letter-spacing: -.045em; }
.payroll-cab-hero__amount small { font-size: .45em; font-weight: 750; color: var(--color-muted); }
.payroll-cab-hero__facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.payroll-cab-hero__facts span { display: flex; flex-direction: column; gap: 2px; min-width: 115px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface) 78%, transparent); }
.payroll-cab-hero__facts small { color: var(--color-muted); font-size: 10.5px; }
.payroll-cab-hero__facts b { font-size: 13px; }
.payroll-cab-hero__pending-title { margin-top: 5px; font-size: clamp(24px, calc(4vw * var(--vu)), 34px); line-height: 1.14; }
.payroll-cab-hero__pending-text { max-width: 580px; margin-top: 10px; color: var(--color-muted); }
.payroll-cab-hero__side {
display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 13px;
padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-alt);
}
.payroll-cab-hero__side-icon { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary-dark); font-size: 19px; font-weight: 850; }
.payroll-cab-hero__side p { color: var(--color-muted); font-size: 12.5px; line-height: 1.45; }
.payroll-cab-history__count { color: var(--color-muted); font-size: 12px; }
.payroll-cab-list { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-card); }
.payroll-cab-row {
display: grid; grid-template-columns: minmax(145px, .45fr) minmax(250px, 1fr) auto;
gap: 18px; align-items: center; padding: 17px 18px; border-bottom: 1px solid var(--color-border);
transition: background .18s var(--ease), padding-left .18s var(--ease);
}
.payroll-cab-row:last-child { border-bottom: 0; }
.payroll-cab-row:hover { padding-left: 21px; background: var(--color-surface-alt); }
.payroll-cab-row__date,
.payroll-cab-row__summary { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.payroll-cab-row__date small,
.payroll-cab-row__summary small { color: var(--color-muted); font-size: 11.5px; }
.payroll-cab-row__summary strong { font-size: 16px; }
.payroll-cab-row__status { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.payroll-cab-row__arrow { color: var(--color-faint); font-size: 18px; }
.payroll-cab-empty { margin-top: 18px; }
.cab-inst { margin-bottom: 26px; }
.cab-inst__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cab-inst__card {
display: flex; flex-direction: column; gap: 12px; padding: 18px;
border: 1px solid color-mix(in srgb, var(--color-warning) 26%, var(--color-border));
border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-card);
}
.cab-inst__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cab-inst__badge {
padding: 4px 10px; border-radius: var(--radius-pill);
background: var(--color-warning-soft); color: var(--color-warning-strong, var(--color-warning));
font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.cab-inst__months { color: var(--color-muted); font-size: 11.5px; font-weight: 650; }
.cab-inst__amounts { display: flex; flex-direction: column; gap: 2px; }
.cab-inst__amounts strong { font-size: 28px; line-height: 1.1; letter-spacing: -.03em; color: var(--color-heading); }
.cab-inst__amounts strong small { font-size: .55em; color: var(--color-muted); font-weight: 750; }
.cab-inst__amounts > span { color: var(--color-muted); font-size: 12px; }
.cab-inst__bar {
position: relative; height: 7px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); overflow: hidden;
}
.cab-inst__bar span {
position: absolute; inset: 0 auto 0 0; border-radius: inherit;
background: linear-gradient(90deg, var(--color-success), color-mix(in srgb, var(--color-success) 65%, var(--color-primary)));
transition: width .3s var(--ease);
}
.cab-inst__steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cab-inst__step {
display: flex; flex-direction: column; gap: 1px; min-width: 84px; flex: 1 1 0;
padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface-soft);
}
.cab-inst__step b { font-size: 12.5px; }
.cab-inst__step small { color: var(--color-faint); font-size: 10.5px; }
.cab-inst__step--past { border-color: color-mix(in srgb, var(--color-success) 34%, var(--color-border)); background: var(--color-success-soft); }
.cab-inst__step--past b { color: var(--color-success); }
.cab-inst__step--current { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); background: var(--color-primary-soft); }
.cab-inst__step--current b { color: var(--color-primary-dark); }
.cab-inst__debt {
margin: 0; padding: 8px 10px; border-radius: var(--radius-md);
background: var(--color-warning-soft); color: var(--color-warning);
font-size: 12.5px; line-height: 1.45;
}
.cab-inst__debt b { color: inherit; }
.cab-inst__next { color: var(--color-muted); font-size: 12px; }
.cab-inst__next b { color: var(--color-heading); }
.payroll-detail-head { align-items: flex-end; }
.payroll-detail-head > div { display: flex; flex-direction: column; gap: 4px; }
.payroll-detail-hero {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: clamp(22px, calc(4vw * var(--vu)), 34px); margin-bottom: 16px;
border: 0;
border-radius: var(--radius-2xl); background: linear-gradient(135deg, var(--color-success-soft), var(--color-surface) 55%); box-shadow: var(--shadow-card);
}
.payroll-detail-hero__main { display: flex; flex-direction: column; align-items: flex-start; }
.payroll-detail-hero__label { margin-top: 13px; color: var(--color-muted); font-size: 12px; }
.payroll-detail-hero__amount { font-size: clamp(42px, calc(7vw * var(--vu)), 62px); line-height: 1.05; letter-spacing: -.045em; }
.payroll-detail-hero__amount small { font-size: .45em; color: var(--color-muted); }
.payroll-detail-hero__main p { max-width: 570px; margin-top: 10px; color: var(--color-muted); font-size: 12.5px; }
.payroll-detail-hero__work { display: flex; gap: 10px; }
.payroll-detail-hero__work span { display: flex; flex-direction: column; gap: 1px; min-width: 90px; padding: 14px; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface) 80%, transparent); }
.payroll-detail-hero__work small { color: var(--color-muted); font-size: 11px; }
.payroll-detail-hero__work strong { font-size: 20px; }
.payroll-detail-summary {
display: grid; grid-template-columns: minmax(135px, 1fr) auto minmax(135px, 1fr) auto minmax(135px, 1fr) auto minmax(135px, 1fr) auto minmax(135px, 1fr);
gap: 8px; align-items: stretch; margin-bottom: 16px;
}
.payroll-detail-summary__card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.payroll-detail-summary__card > span { color: var(--color-muted); font-size: 11px; }
.payroll-detail-summary__card strong { margin-top: auto; font-size: 17px; }
.payroll-detail-summary__card small { min-height: 2.8em; color: var(--color-faint); font-size: 9.5px; line-height: 1.35; }
.payroll-detail-summary__card--bonus { border-color: color-mix(in srgb, var(--color-success) 24%, var(--color-border)); }
.payroll-detail-summary__card--deduction { border-color: color-mix(in srgb, var(--color-danger) 24%, var(--color-border)); }
.payroll-detail-summary__card--deduction strong { color: var(--color-danger); }
.payroll-detail-summary__card--total { border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-border)); background: var(--color-primary-soft); }
.payroll-detail-summary__card--total strong { color: var(--color-primary-dark); }
.payroll-detail-summary__operator { align-self: center; color: var(--color-muted); font-size: 18px; font-weight: 800; }
.payroll-detail-breakdown { margin-bottom: 16px; }
.payroll-detail-pending {
display: flex; align-items: center; gap: 18px; margin-bottom: 16px; padding: clamp(22px, calc(4vw * var(--vu)), 34px);
border: 1px solid color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
border-radius: var(--radius-2xl); background: linear-gradient(135deg, var(--color-warning-soft), var(--color-surface) 58%); box-shadow: var(--shadow-card);
}
.payroll-detail-pending__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 17px; background: var(--color-warning-soft); font-size: 25px; }
.payroll-detail-pending > div { flex: 1 1 auto; }
.payroll-detail-pending h2 { margin-top: 4px; font-size: 24px; }
.payroll-detail-pending p { max-width: 650px; margin-top: 7px; color: var(--color-muted); }
.payroll-comment-card { gap: 14px; }
.payroll-comment-card__message { padding: 13px 15px; border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-primary-soft); }
.payroll-comment-card__message > span { color: var(--color-muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.payroll-comment-card__message p { margin-top: 4px; }
.payroll-comment-form { display: flex; align-items: flex-end; gap: 10px; }
.payroll-comment-form .input { flex: 1 1 auto; min-height: 72px; resize: vertical; }
@media (max-width: 880px) {
.formula-hero { grid-template-columns: minmax(0, 1fr) minmax(245px, .62fr); }
.formula-library { grid-template-columns: 1fr; }
.payroll-detail-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.payroll-detail-summary__operator { display: none; }
}
@media (max-width: 819px) {
.formula-hero,
.payroll-cab-hero { grid-template-columns: 1fr; }
.formula-active-grid { grid-template-columns: 1fr; }
.formula-builder-head { align-items: flex-start; flex-direction: column; }
.formula-profile-fields,
.formula-toggle-grid { grid-template-columns: 1fr; }
.formula-version-bar__note { order: 3; flex-basis: 100%; }
.payroll-cab-hero__side { align-items: stretch; }
.payroll-cab-row { grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr); }
.payroll-cab-row__status { grid-column: 1 / -1; justify-content: space-between; }
.payroll-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payroll-detail-summary__card--total { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
.formula-hero { padding: 22px; }
.formula-hero__actions,
.formula-hero__actions .btn { width: 100%; }
.formula-section__head { align-items: flex-start; flex-direction: column; }
.formula-profile-card { align-items: stretch; flex-direction: column; }
.formula-profile-card__actions { justify-content: flex-start; }
.formula-template-block__head { align-items: flex-start; flex-direction: column; gap: 2px; }
.formula-template-grid { grid-template-columns: 1fr; }
.formula-version-bar { align-items: stretch; }
.formula-version-bar .fbar__actions,
.formula-version-bar .fbar__actions form,
.formula-version-bar .fbar__actions .btn { width: 100%; }
.formula-step-card { padding: 16px; }
.formula-score-grid,
.form-grid--3 { grid-template-columns: 1fr; }
.form-field--pair { grid-column: auto; }
.fpair { align-items: stretch; flex-direction: column; }
.fpair__sep { align-self: flex-start; }
.payroll-cab-hero { padding: 20px; }
.payroll-cab-hero__facts { display: grid; grid-template-columns: 1fr; width: 100%; }
.payroll-cab-row { grid-template-columns: 1fr; gap: 8px; }
.payroll-cab-row__status { grid-column: auto; }
.payroll-detail-hero,
.payroll-detail-pending { align-items: flex-start; flex-direction: column; }
.payroll-detail-hero__work { width: 100%; }
.payroll-detail-hero__work span { flex: 1 1 0; }
.payroll-detail-summary { grid-template-columns: 1fr; }
.payroll-detail-summary__card--total { grid-column: auto; }
.payroll-comment-form { align-items: stretch; flex-direction: column; }
.payroll-comment-form .btn { width: 100%; }
}
@media (max-width: 420px) {
.form-grid--sim { grid-template-columns: 1fr; }
.formula-preview-check { grid-column: auto; }
.formula-builder-head__mark { width: 40px; height: 40px; }
.formula-builder-head__title-row .page__title { font-size: 24px; }
.payroll-cab-hero__amount,
.payroll-detail-hero__amount { font-size: 38px; }
}
.grid--claim {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.claim-hero {
display: grid;
grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2fr);
gap: 24px;
align-items: center;
padding: 26px 28px;
margin-bottom: 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
background: var(--gradient-surface);
box-shadow: var(--shadow-card);
}
.claim-hero__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.claim-hero__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.claim-hero__amount {
font-size: 34px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--color-heading);
font-variant-numeric: tabular-nums;
}
.claim-hero__title { color: var(--color-muted); font-size: 13.5px; font-weight: 600; }
.claim-hero__facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 0;
}
.claim-hero__facts > div { padding: 0 18px; border-left: 1px solid var(--color-border); min-width: 0; }
.claim-hero__facts > div:first-child { border-left: 0; padding-left: 0; }
.claim-hero__facts dt {
color: var(--color-faint);
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 5px;
}
.claim-hero__facts dd {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--color-text);
overflow-wrap: anywhere;
}
.claim-hero__sub {
display: block;
margin-top: 3px;
font-size: 12px;
font-weight: 500;
color: var(--color-muted);
}
.claim-hero__empty { color: var(--color-warning); }
.claim-panel { gap: 12px; }
.claim-panel__state {
padding: 10px 14px;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
background: var(--color-surface-soft);
color: var(--color-muted);
}
.claim-panel__state--success { background: var(--color-success-soft); color: var(--color-success); }
.claim-panel__state--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.claim-acts { display: grid; gap: 8px; }
.claim-act {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
overflow: hidden;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.claim-act[open] { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }
.claim-act__head {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
cursor: pointer;
list-style: none;
user-select: none;
}
.claim-act__head::-webkit-details-marker { display: none; }
.claim-act__head::after {
content: "";
margin-left: auto;
width: 8px;
height: 8px;
flex: none;
border-right: 2px solid var(--color-faint);
border-bottom: 2px solid var(--color-faint);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .18s var(--ease);
}
.claim-act[open] > .claim-act__head::after { transform: rotate(225deg) translate(-2px, -2px); }
.claim-act__head:hover { background: var(--color-surface-soft); }
.claim-act__title { font-size: 13.5px; font-weight: 700; color: var(--color-text); flex: 0 1 auto; }
.claim-act__hint { font-size: 12px; color: var(--color-muted); flex: 1 1 60px; min-width: 0; }
.claim-act--danger .claim-act__title { color: var(--color-danger); }
.claim-act__body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 4px 14px 14px;
border-top: 1px solid var(--color-border);
}
.claim-act__foot { display: flex; gap: 10px; flex-wrap: wrap; }
.claim-act__foot .btn { min-width: 180px; }
.claim-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.claim-act__body textarea.input { min-height: 64px; }
.claim-act__head::before {
content: "";
flex: none;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--color-surface);
border: 1px solid var(--color-border);
background-image: var(--claim-act-icon, none);
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
.claim-act {
background: var(--color-surface-soft);
border-color: var(--color-border-strong);
}
.claim-act[open] {
background: var(--color-surface);
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.claim-act__head { padding: 12px 14px; }
.claim-act__head:hover { background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent); }
.claim-act__head::before {
--claim-act-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}
.claim-act--group > .claim-act__head::before {
--claim-act-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/svg%3E");
}
.claim-act--danger > .claim-act__head::before {
--claim-act-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D02B39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
border-color: color-mix(in srgb, var(--color-danger) 34%, var(--color-border));
}
.claim-act--danger { border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border-strong)); }
.claim-act--danger[open] { border-color: var(--color-danger); }
.claim-act--primary {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.claim-act--primary > .claim-act__head {
background: var(--color-primary-soft);
cursor: default;
}
.claim-act--primary > .claim-act__head::after { display: none; }
.claim-act--primary > .claim-act__head:hover { background: var(--color-primary-soft); }
.claim-act--primary > .claim-act__head .claim-act__title { color: var(--color-primary-dark); }
.claim-act--primary > .claim-act__head .claim-act__hint { color: var(--color-primary-dark); opacity: .72; }
.claim-act--group { background: var(--color-surface-soft); }
.claim-act--group[open] { background: var(--color-surface); }
.claim-act__nest {
display: grid;
gap: 6px;
padding: 4px 10px 10px;
border-top: 1px solid var(--color-border);
}
.claim-act__nest > .claim-act { border-color: var(--color-border); }
.claim-thread { gap: 12px; }
.claim-thread__head { min-width: 0; }
.claim-thread__with { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: var(--color-muted); }
.claim-thread .agreement-thread__feed { min-height: 190px; }
.claim-thread .agreement-thread__empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 190px;
margin: 0;
border-radius: var(--radius-md);
background: var(--color-surface-soft);
text-align: center;
}
.card__count {
margin-left: auto;
min-width: 22px;
padding: 0 7px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--color-surface-soft);
color: var(--color-muted);
font-size: 11.5px;
font-weight: 700;
}
.agreement-msg--internal .agreement-msg__bubble {
background: var(--color-surface-soft);
border: 1px dashed var(--color-border-strong);
color: var(--color-text);
}
.agreement-msg__tag {
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 5px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--color-muted);
}
.agreement-msg__tag svg { width: 11px; height: 11px; flex: none; }
.thread-event {
align-self: center;
max-width: 92%;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 7px;
margin: 2px 0;
padding: 6px 12px;
border-radius: 999px;
background: var(--color-surface-soft);
font-size: 12px;
color: var(--color-muted);
text-align: center;
justify-content: center;
}
.thread-event__mark { font-weight: 700; color: var(--color-text); }
.thread-event__text { min-width: 0; overflow-wrap: anywhere; }
.thread-event__time { font-size: 11px; color: var(--color-faint); }
.thread-chip {
display: inline-flex;
align-items: center;
gap: 3px;
height: 20px;
padding: 0 6px;
margin-right: 6px;
vertical-align: -4px;
border-radius: 7px;
background: var(--color-surface-soft);
color: var(--color-muted);
font-size: 11.5px;
font-weight: 650;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.thread-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.chat-list-group__note { margin: 4px 12px 8px; font-size: 11.5px; }
.thread-chip--new { background: var(--color-primary-soft); color: var(--color-primary); }
.thread-chip__new { font-weight: 800; }
.claim-row:has(.thread-chip--new) .cell-strong { font-weight: 800; }
.thread-locked {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 12px 14px;
border-radius: var(--radius-md);
background: var(--color-surface-soft);
border: 1px dashed var(--color-border-strong);
font-size: 12.5px;
line-height: 1.5;
color: var(--color-muted);
}
.thread-locked svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--color-faint); }
.thread-locked strong { display: block; color: var(--color-text); font-weight: 700; margin-bottom: 2px; }
.thread-visibility {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: var(--color-surface-soft);
cursor: pointer;
}
.thread-visibility input { margin-top: 2px; flex: none; }
.thread-visibility__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.thread-visibility__text strong { font-size: 12.5px; font-weight: 700; color: var(--color-text); }
.thread-visibility__text span { font-size: 11.5px; color: var(--color-muted); }
.thread-visibility:has(input:checked) { background: var(--color-warning-soft); }
.thread-visibility:has(input:checked) .thread-visibility__text strong { color: var(--color-warning); }
.claim-roster {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px; border-radius: var(--radius-md);
background: var(--color-surface-soft);
}
.claim-roster__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.claim-roster__title { font-size: 12.5px; font-weight: 700; color: var(--color-text); }
.claim-roster__note { font-size: 11.5px; color: var(--color-warning); }
.claim-roster__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.claim-roster__row {
display: flex; align-items: center; gap: 10px;
padding: 5px 8px; border-radius: var(--radius-sm);
font-size: 13px;
}
.claim-roster__row.is-on { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.claim-roster__who { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.claim-roster__home { font-size: 11.5px; color: var(--color-warning); }
.claim-roster__time { flex: none; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.claim-roster__pick { flex: none; }
.claim-roster__blocked { flex: none; font-size: 11.5px; color: var(--color-faint); }
.claim-roster__empty { margin: 0; font-size: 12.5px; color: var(--color-muted); }
.claim-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; }
.claim-facts > div {
display: grid;
gap: 3px;
padding: 9px 0;
border-bottom: 1px solid var(--color-border);
min-width: 0;
}
.claim-facts dt {
color: var(--color-faint);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.claim-facts dd { margin: 0; font-size: 13px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.claim-texts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.claim-text {
padding: 10px 12px;
border-radius: var(--radius-md);
background: var(--color-surface-soft);
min-width: 0;
}
.claim-text__label {
display: block;
color: var(--color-faint);
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
}
.claim-text__body { margin: 0; font-size: 13px; color: var(--color-text); overflow-wrap: anywhere; }
@media (max-width: 944px) {
.claim-hero { grid-template-columns: 1fr; gap: 18px; }
.claim-hero__facts > div { padding-inline: 14px; }
}
@media (max-width: 819px) {
.grid--claim { grid-template-columns: 1fr; }
.claim-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
.claim-hero__facts > div:nth-child(odd) { border-left: 0; padding-left: 0; }
.claim-fields,
.claim-facts,
.claim-texts { grid-template-columns: 1fr; }
.claim-act__foot .btn { width: 100%; }
}
@media (max-width: 520px) {
.claim-hero { padding: 18px; }
.claim-hero__amount { font-size: 28px; }
.claim-hero__facts { grid-template-columns: 1fr; }
.claim-hero__facts > div { border-left: 0; padding-left: 0; }
}
.overlap-conflicts { margin: 6px 0 10px; padding-left: 18px; display: grid; gap: 4px; font-weight: 500; }
.overlap-conflicts li { line-height: 1.45; }
.overlap-conflicts .badge { margin-left: 6px; }
.alert-rows { display: grid; gap: 10px; }
.alert-row {
padding: 14px 16px;
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-warning);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-card);
}
.alert-row--danger { border-left-color: var(--color-danger); }
.alert-row__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.alert-row__pvz { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.alert-row__code { font-size: 15px; font-weight: 800; color: var(--color-heading); }
.alert-row__code:hover { color: var(--color-primary); }
.alert-row__name { color: var(--color-muted); font-size: 13px; }
.alert-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.alert-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 10px;
border-radius: var(--radius-md);
background: var(--color-surface-soft);
border: 1px solid transparent;
transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.alert-chip:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.alert-chip__count {
display: grid;
place-items: center;
min-width: 30px;
height: 30px;
padding: 0 6px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 800;
font-variant-numeric: tabular-nums;
background: var(--color-warning-soft);
color: var(--color-warning);
}
.alert-chip--danger .alert-chip__count { background: var(--color-danger-soft); color: var(--color-danger); }
.alert-chip__body { display: grid; gap: 1px; min-width: 0; }
.alert-chip__title { font-size: 13px; font-weight: 700; color: var(--color-text); }
.alert-chip__text { font-size: 11.5px; color: var(--color-muted); }
@media (max-width: 640px) {
.alert-row__head { align-items: flex-start; flex-direction: column; gap: 6px; }
.alert-chip { width: 100%; }
}
.repcal {
position: relative;
overflow: hidden;
padding: 18px 20px;
margin-bottom: 18px;
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
background: var(--gradient-surface);
box-shadow: var(--shadow-card);
}
.repcal::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 360px;
pointer-events: none;
background: radial-gradient(120% 100% at 0% 0%, var(--color-primary-soft), transparent 72%);
}
.repcal--due::before { background: radial-gradient(120% 100% at 0% 0%, var(--color-warning-soft), transparent 72%); }
.repcal--done::before { background: radial-gradient(120% 100% at 0% 0%, var(--color-success-soft), transparent 72%); }
.repcal--due { border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border)); }
.repcal__head {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 14px;
}
.repcal__intro { min-width: 0; display: grid; gap: 3px; }
.repcal__title {
margin: 0;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-heading);
}
.repcal__summary { margin: 0; max-width: 68ch; font-size: 12.5px; line-height: 1.45; color: var(--color-muted); }
.repcal--due .repcal__summary { color: var(--color-warning); font-weight: 650; }
.repcal__cta { flex: none; }
.repcal__slots {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 12px;
}
@media (min-width: 881px) {
.repcal__slots:has(> .repslot:nth-child(4):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.repslot {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.repslot:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.repslot--done { border-color: color-mix(in srgb, var(--color-success) 32%, var(--color-border)); }
.repslot--due { border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-border)); }
.repslot__leaf {
flex: none;
display: grid;
grid-template-rows: 18px 1fr;
width: 52px;
height: 58px;
overflow: hidden;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow: var(--shadow-soft);
}
.repslot__month {
position: relative;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-on-primary);
background: var(--color-primary);
}
.repslot__day {
display: grid;
place-items: center;
font-size: 25px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--color-heading);
}
.repslot__month::before,
.repslot__month::after {
content: "";
position: absolute;
top: 6px;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
}
.repslot__month::before { left: 7px; }
.repslot__month::after { right: 7px; }
.repslot--done .repslot__month { background: var(--color-success); }
.repslot--due .repslot__month { background: var(--color-warning); }
.repslot--due .repslot__day { color: var(--color-warning); }
.repslot__body { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.repslot__title { font-size: 14px; font-weight: 700; color: var(--color-heading); }
.repslot__sub {
font-size: 12px;
color: var(--color-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.repslot__fact {
margin-top: 3px;
font-size: 12px;
font-weight: 650;
color: var(--color-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.repslot__fact::before {
content: "✓";
margin-right: 5px;
font-weight: 800;
color: var(--color-success);
}
.repslot--due .repslot__fact { color: var(--color-warning); }
.repslot--due .repslot__fact::before { content: "•"; color: var(--color-warning); }
.repslot__side { flex: none; display: grid; justify-items: end; gap: 7px; }
.repslot__when {
padding: 3px 9px;
border-radius: var(--radius-pill);
background: var(--color-surface-soft);
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
color: var(--color-muted);
}
.repslot--due .repslot__when { background: var(--color-warning-soft); color: var(--color-warning); }
.repslot__action { flex: none; }
@media (max-width: 880px) {
.repcal__slots { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.repcal { padding: 14px 16px; }
.repcal__head { flex-direction: column; align-items: stretch; gap: 12px; }
.repcal__cta { width: 100%; }
.repslot { flex-wrap: wrap; }
.repslot__side { flex: 1 0 100%; grid-auto-flow: column; justify-items: stretch; align-items: center; }
.repslot__when { text-align: center; }
}
.tariff-changes { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.tariff-change {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius-md);
font-size: 13px;
}
.tariff-change:nth-child(odd) { background: var(--color-surface-soft); }
.tariff-change__date { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.tariff-change__move { color: var(--color-muted); }
.tariff-change__move b { color: var(--color-text); }
.tariff-change__points { color: var(--color-faint); font-size: 12px; }
.tariff-change__delta {
padding: 3px 10px;
border-radius: var(--radius-pill);
font-weight: 700;
font-variant-numeric: tabular-nums;
background: var(--color-success-soft);
color: var(--color-success);
}
.tariff-change--down .tariff-change__delta { background: var(--color-danger-soft); color: var(--color-danger); }
.rate-move { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.rate-spark { width: 96px; height: 22px; overflow: visible; }
.rate-spark polyline { fill: none; stroke: var(--color-success); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rate-move--down .rate-spark polyline { stroke: var(--color-danger); }
.rate-move--flat .rate-spark polyline { stroke: var(--color-border-strong); }
.rate-move__delta { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-success); }
.rate-move--down .rate-move__delta { color: var(--color-danger); }
.rate-move--flat .rate-move__delta { color: var(--color-faint); font-weight: 500; }
.table--center thead th,
.table--center td { text-align: center; vertical-align: middle; }
.rate-table .rate-move { justify-content: center; }
.rate-row--expandable { cursor: pointer; }
.rate-row--expandable:hover,
.rate-row--expandable:focus-visible { background: var(--color-surface-soft); outline: none; }
.rate-row--expandable:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
.rate-toggle {
display: inline-flex; align-items: center; gap: 6px;
color: var(--color-muted); font-size: 13px; white-space: nowrap;
}
.rate-toggle svg { width: 15px; height: 15px; transition: transform .18s var(--ease); }
.rate-group.is-open .rate-toggle { color: var(--color-text); }
.rate-group.is-open .rate-toggle svg { transform: rotate(180deg); }
.rate-group.is-open .rate-row { background: var(--color-surface-soft); }
.rate-details > td { background: var(--color-surface-soft); padding-top: 4px; }
.rate-periods { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; justify-items: center; }
.rate-periods li {
display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center;
font-size: 13px;
}
.rate-periods__span { font-variant-numeric: tabular-nums; color: var(--color-muted); }
.rate-periods__rate { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.tariff-change { grid-template-columns: 1fr auto; row-gap: 4px; }
.tariff-change__move { grid-column: 1 / -1; order: 3; }
.tariff-change__points { order: 4; }
}
.grid--claim-bottom {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
@media (max-width: 760px) {
.grid--claim-bottom { grid-template-columns: 1fr; }
}
.claim-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.usage-bar { display: block; width: 64px; height: 6px; border-radius: 999px; background: var(--color-surface-soft); overflow: hidden; }
.usage-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--color-success); }
.usage-bar--warning .usage-bar__fill { background: var(--color-warning); }
.usage-bar--danger .usage-bar__fill { background: var(--color-danger); }
.usage-bar--muted .usage-bar__fill { background: var(--color-border-strong); }
.chip--static { cursor: default; color: var(--color-muted); }
.table-daybreak td {
padding: 9px 14px; background: var(--color-surface-alt);
border-top: 1px solid var(--color-border);
}
.table tbody tr.table-daybreak:hover { background: transparent; }
.table tbody tr.table-daybreak:hover td { background: var(--color-surface-alt); }
.table-daybreak__day {
font-weight: 800; font-size: 12.5px; color: var(--color-heading);
letter-spacing: -0.01em;
}
.table-daybreak__meta { margin-left: 10px; font-size: 12px; color: var(--color-muted); }
.table-daybreak--danger td { box-shadow: inset 3px 0 0 var(--color-danger); }
.accept-steps[hidden] { display: none !important; }
.accept-row { cursor: pointer; }
.accept-row.is-open td { background: var(--color-surface-soft); }
.accept-steps td { background: var(--color-surface-alt); }
.accept-steps__head { font-size: 12.5px; color: var(--color-muted); margin-bottom: 10px; }
.accept-steps__list { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.accept-step {
display: grid; grid-template-columns: 88px 168px minmax(0, 1fr) 96px 108px;
gap: 12px; align-items: baseline; padding: 6px 10px; border-radius: var(--radius-sm);
font-size: 12.5px; font-variant-numeric: tabular-nums; background: var(--color-surface);
}
.accept-step__day { font-weight: 700; color: var(--color-heading); }
.accept-step__window, .accept-step__range { color: var(--color-muted); }
.accept-step__gained { font-weight: 700; color: var(--color-success); }
.accept-step__running { color: var(--color-text); }
.accept-step--idle { background: transparent; }
.accept-step--idle .accept-step__gained { color: var(--color-faint); font-weight: 500; }
@media (max-width: 819px) {
.accept-step { grid-template-columns: 1fr 1fr; }
}
.pc-shell { min-height: 100vh; background: var(--color-bg); display: flex; flex-direction: column; }
.pc-topbar {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 20px;
padding: 0 22px; min-height: 60px;
background: var(--sidebar-bg); border-bottom: 1px solid var(--sidebar-border);
}
.pc-topbar .topbar__back {
flex-shrink: 0; margin-right: -8px;
border-color: transparent; background: rgba(255, 255, 255, .06); color: var(--sidebar-text);
}
.pc-topbar .topbar__back:hover { background: rgba(255, 255, 255, .12); color: var(--sidebar-heading); }
.pc-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.pc-brand__mark {
width: 32px; height: 32px; border-radius: var(--radius-md);
display: grid; place-items: center;
background: var(--gradient-brand); color: #fff;
font-weight: 800; font-size: 16px; letter-spacing: -0.02em;
}
.pc-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.pc-brand__text strong { color: var(--sidebar-heading); font-size: 14.5px; font-weight: 750; }
.pc-brand__text em { color: var(--sidebar-text); font-size: 11px; font-style: normal; opacity: .8; }
.pc-nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; overflow-x: auto; scrollbar-width: none; }
.pc-nav::-webkit-scrollbar { display: none; }
.pc-nav__item {
position: relative; white-space: nowrap;
padding: 8px 13px; border-radius: var(--radius-pill);
color: var(--sidebar-text); text-decoration: none;
font-size: 13.5px; font-weight: 600;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.pc-nav__item:hover { background: rgba(255, 255, 255, .07); color: var(--sidebar-heading); }
.pc-nav__item.is-active { background: var(--sidebar-active); color: #fff; }
.pc-nav__badge {
margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill);
background: var(--color-coral); color: #fff; font-size: 11px; font-weight: 800;
}
.pc-nav__item.is-active .pc-nav__badge { background: rgba(255, 255, 255, .25); }
.pc-topbar__side { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pc-user {
width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255, 255, 255, .1); color: var(--sidebar-heading);
font-size: 12px; font-weight: 750;
}
.pc-exit { color: var(--sidebar-text); text-decoration: none; font-size: 13px; font-weight: 600; }
.pc-exit:hover { color: var(--sidebar-heading); }
.pc-main {
flex: 1; width: 100%; max-width: 1360px; margin-inline: auto;
padding: 24px 22px 60px; display: flex; flex-direction: column; gap: 20px;
animation: fade-in .3s var(--ease) both;
}
.pc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.pc-stat {
display: flex; flex-direction: column; gap: 5px;
padding: 17px 18px; border-radius: var(--radius-lg);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
animation: pop-in .34s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pc-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.pc-stat__label { font-size: 12.5px; font-weight: 650; color: var(--color-muted); }
.pc-stat__value {
font-size: 30px; font-weight: 800; line-height: 1.05;
color: var(--color-heading); letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.pc-stat__value--cold { color: var(--color-warning); }
.pc-stat__hint { font-size: 12px; color: var(--color-faint); display: flex; align-items: center; gap: 6px; }
.pc-pulse {
width: 7px; height: 7px; border-radius: 50%; background: var(--color-success);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent);
animation: pc-pulse 2s ease-out infinite;
}
@keyframes pc-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 55%, transparent); }
70% { box-shadow: 0 0 0 8px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.pc-online {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 700; color: var(--color-success);
}
.pc-panel { display: flex; flex-direction: column; gap: 14px; }
.pc-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc-panel__title { font-size: 15px; font-weight: 750; color: var(--color-heading); margin: 0; }
.pc-panel__hint { font-size: 12px; color: var(--color-faint); }
.pc-panel__link { font-size: 12.5px; font-weight: 650; color: var(--color-primary); text-decoration: none; }
.pc-panel__link:hover { text-decoration: underline; }
.pc-panel--cold { border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border)); }
.pc-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.pc-columns--aside { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.pc-aside { display: flex; flex-direction: column; gap: 20px; }
.pc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-muted { color: var(--color-muted); font-size: 13px; }
.pc-muted--sm { font-size: 12px; color: var(--color-faint); }
.pc-slug {
display: inline-block; margin-left: 6px;
font-size: 11.5px; color: var(--color-faint); font-weight: 500;
}
.pc-chart { display: flex; flex-direction: column; gap: 8px; }
.pc-chart__plot { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.pc-chart__col {
position: relative; flex: 1; height: 100%;
display: flex; align-items: flex-end; justify-content: center;
border-radius: var(--radius-sm); cursor: default;
}
.pc-chart__col:hover, .pc-chart__col:focus-visible { background: var(--color-surface-soft); outline: none; }
.pc-chart__bar {
width: 100%; max-width: 26px; min-height: 3px; height: max(3px, var(--pc-h, 0%));
border-radius: 4px 4px 2px 2px;
background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, transparent));
transform-origin: bottom;
animation: bar-grow .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 14ms);
}
.pc-chart__col.is-today .pc-chart__bar { background: linear-gradient(180deg, var(--color-coral), color-mix(in srgb, var(--color-coral) 55%, transparent)); }
.pc-chart__tip {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
display: flex; flex-direction: column; gap: 2px; white-space: nowrap;
padding: 7px 10px; border-radius: var(--radius-md);
background: var(--color-heading); color: #fff; font-size: 11.5px;
opacity: 0; pointer-events: none; z-index: 5;
transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.pc-chart__tip em { font-style: normal; opacity: .7; }
.pc-chart__col:hover .pc-chart__tip, .pc-chart__col:focus-visible .pc-chart__tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.pc-chart__axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--color-faint); }
.pc-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-bar { display: grid; grid-template-columns: minmax(96px, 1.1fr) minmax(0, 2fr) auto; align-items: center; gap: 11px; font-size: 13px; }
.pc-bar__label { color: var(--color-text); font-weight: 600; }
.pc-bar__track, .pc-cell-bar__track { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-soft); overflow: hidden; }
.pc-bar__fill, .pc-cell-bar__fill {
display: block; height: 100%; width: var(--pc-share, 0%);
border-radius: var(--radius-pill); background: var(--gradient-brand);
animation: fill-grow .6s var(--ease) both;
}
.pc-bar__value { color: var(--color-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pc-cell-bar { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.pc-cell-bar__label { font-weight: 600; }
.pc-row--cold td { opacity: .62; }
.pc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip {
padding: 6px 12px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); color: var(--color-text);
font-size: 12.5px; font-weight: 600;
}
.pc-chip span { color: var(--color-faint); font-weight: 500; margin-left: 5px; font-size: 11px; }
.pc-chip--cold { background: var(--color-warning-soft); color: var(--color-warning); }
.pc-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pc-role {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 12px; border-radius: var(--radius-md); background: var(--color-surface-soft);
font-size: 13px;
}
.pc-role.is-empty { opacity: .5; }
.pc-role__count { font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pc-feed__item {
display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 13px;
}
.pc-feed__item:last-child { border-bottom: 0; }
.pc-feed__time { color: var(--color-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.pc-feed__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-feed__body strong { font-weight: 700; }
.pc-feed__meta { font-size: 11.5px; color: var(--color-faint); }
.pc-feed__item--critical .pc-feed__body strong { color: var(--color-danger); }
.pc-feed__item--warning .pc-feed__body strong { color: var(--color-warning); }
.pc-tickets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-ticket { display: flex; flex-direction: column; gap: 4px; }
.pc-ticket__subject { font-weight: 700; color: var(--color-heading); text-decoration: none; }
.pc-ticket__subject:hover { color: var(--color-primary); }
.pc-ticket__excerpt { margin: 0; color: var(--color-muted); font-size: 13px; }
.pc-ticket__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--color-faint); }
.pc-ticket--card {
padding: 14px 16px; border-radius: var(--radius-lg);
background: var(--color-surface-alt); border: 1px solid var(--color-border);
transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.pc-ticket--card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pc-ticket--card.is-unread { border-left: 3px solid var(--color-primary); }
.pc-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pc-filters .input { max-width: 260px; }
.pc-range { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--color-surface-soft); flex-wrap: wrap; }
.pc-range__item {
padding: 6px 13px; border-radius: var(--radius-pill);
color: var(--color-muted); text-decoration: none; font-size: 12.5px; font-weight: 650;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.pc-range__item:hover { color: var(--color-text); }
.pc-range__item.is-active { background: var(--color-surface); color: var(--color-heading); box-shadow: var(--shadow-xs); }
.pc-range__count { opacity: .65; font-size: 11px; }
.pc-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 6px; }
.pc-pager__state { font-size: 12.5px; color: var(--color-muted); }
.pc-form { padding: 22px; gap: 20px; }
.pc-form__section { display: flex; flex-direction: column; gap: 13px; }
.pc-form__legend { font-size: 13px; font-weight: 750; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.pc-credentials { padding: 22px; display: flex; flex-direction: column; gap: 18px; animation: pop-in .35s var(--ease) both; }
.pc-credentials__head { display: flex; gap: 14px; align-items: flex-start; }
.pc-credentials__icon { font-size: 26px; line-height: 1; }
.pc-credentials__title { margin: 0 0 3px; font-size: 16px; font-weight: 750; }
.pc-credentials__note { margin: 0; font-size: 13px; color: var(--color-muted); }
.pc-credentials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0; }
.pc-credentials__grid dt { font-size: 12px; color: var(--color-faint); font-weight: 650; margin-bottom: 4px; }
.pc-credentials__grid dd { margin: 0; font-size: 14px; font-weight: 600; }
.pc-credentials__hint { margin: 0; font-size: 12.5px; color: var(--color-muted); }
.pc-copy {
display: inline-block; padding: 6px 11px; border-radius: var(--radius-sm);
background: var(--color-surface-soft); border: 1px dashed var(--color-border-strong);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
cursor: pointer; transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.pc-copy:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pc-copy.is-copied { border-style: solid; border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); }
.pc-copy--secret { letter-spacing: .06em; font-weight: 700; }
.pc-meta { margin: 0; display: flex; flex-direction: column; gap: 11px; }
.pc-meta dt { font-size: 11.5px; color: var(--color-faint); font-weight: 650; }
.pc-meta dd { margin: 0; font-size: 13px; }
.pc-meta__ua { word-break: break-word; color: var(--color-muted); font-size: 11.5px; }
.pc-status-form { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
@media (max-width: 960px) {
.pc-columns, .pc-columns--aside { grid-template-columns: 1fr; }
.pc-main { padding: 18px 14px 48px; }
.pc-topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
.pc-nav { order: 3; width: 100%; margin-left: 0; }
.pc-feed__item { grid-template-columns: 1fr; gap: 3px; }
}
.fb-fab {
position: fixed; right: 22px; bottom: 22px; z-index: 60;
display: inline-flex; align-items: center; gap: 0;
height: 50px; padding: 0 15px; border: 0; border-radius: var(--radius-pill);
background: var(--gradient-primary); color: var(--color-on-primary);
box-shadow: var(--shadow-primary); cursor: pointer;
font: inherit; font-weight: 700; font-size: 13.5px;
transition: transform .22s var(--ease), box-shadow .22s var(--ease), gap .22s var(--ease);
}
.fb-fab svg { width: 21px; height: 21px; flex-shrink: 0; }
.topbar-menu__feedback { display: none; }
.topbar-menu__theme { display: none; }
.agent-cta__short { display: none; }
.fb-fab__label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .28s var(--ease), opacity .2s var(--ease); }
.fb-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 34%, transparent); gap: 9px; }
.fb-fab:hover .fb-fab__label { max-width: 190px; opacity: 1; }
.fb-fab:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow-primary); }
.fb-fab:focus-visible .fb-fab__label { max-width: 190px; opacity: 1; }
body:has(.chat-card) .fb-fab { display: none; }
.fb-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fb-modal[hidden] { display: none; }
.fb-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 12, 16, .55); backdrop-filter: blur(3px); animation: fade-in .2s var(--ease) both; }
.fb-modal__card {
position: relative; z-index: 1;
width: min(640px, 100%); max-height: min(88vh, 860px); overflow-y: auto;
display: flex; flex-direction: column; gap: 16px;
padding: 22px; border-radius: var(--radius-xl);
background: var(--color-surface); box-shadow: var(--shadow-pop);
animation: fb-modal-in .3s var(--ease) both;
}
@keyframes fb-modal-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.fb-modal.is-closing .fb-modal__card { animation: fb-modal-out .18s var(--ease) both; }
.fb-modal.is-closing .fb-modal__backdrop { animation: fb-fade-out .18s var(--ease) both; }
@keyframes fb-modal-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes fb-fade-out { to { opacity: 0; } }
.fb-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fb-modal__title { margin: 0 0 3px; font-size: 18px; font-weight: 800; color: var(--color-heading); }
.fb-modal__sub { margin: 0; font-size: 13px; color: var(--color-muted); }
.fb-modal__close {
width: 34px; height: 34px; flex-shrink: 0;
display: grid; place-items: center; border: 0; border-radius: var(--radius-md);
background: transparent; color: var(--color-muted); cursor: pointer;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.fb-modal__close svg { width: 18px; height: 18px; }
.fb-modal__close:hover { background: var(--color-surface-soft); color: var(--color-text); }
.fb-form { display: flex; flex-direction: column; gap: 15px; }
.fb-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fb-kinds .field__label { padding: 0; }
.fb-kind { display: inline-flex; }
.fb-kinds { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-kinds legend { width: 100%; margin-bottom: 4px; }
.fb-kind input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-kind__box {
padding: 8px 14px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); border: 1px solid transparent;
font-size: 13px; font-weight: 650; color: var(--color-muted); cursor: pointer;
transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.fb-kind__box:hover { color: var(--color-text); }
.fb-kind input:checked + .fb-kind__box { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); transform: translateY(-1px); }
.fb-kind input:focus-visible + .fb-kind__box { box-shadow: var(--ring-soft); }
.fb-drop {
display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
padding: 20px 16px; border-radius: var(--radius-lg);
border: 1.5px dashed var(--color-border-strong); background: var(--color-surface-alt);
cursor: pointer; transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.fb-drop svg { width: 26px; height: 26px; color: var(--color-muted); }
.fb-drop__title { font-size: 13.5px; font-weight: 650; }
.fb-drop__or { color: var(--color-faint); font-weight: 500; }
.fb-drop__hint { font-size: 12px; color: var(--color-faint); }
.fb-drop:hover, .fb-drop.is-dragover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.fb-drop.is-filled { border-style: solid; border-color: var(--color-success); background: var(--color-success-soft); }
.fb-drop__file { font-size: 12.5px; font-weight: 650; color: var(--color-success); }
.fb-picked { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fb-picked[hidden] { display: none; }
.fb-picked__item {
position: relative; width: 74px;
border-radius: var(--radius-md); overflow: hidden;
border: 1px solid var(--color-border); background: var(--color-surface-alt);
animation: fade-in .2s var(--ease) both;
}
.fb-picked__thumb { display: block; width: 100%; height: 56px; object-fit: cover; }
.fb-picked__name {
display: block; padding: 3px 5px; font-size: 10.5px; color: var(--color-faint);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-picked__drop {
position: absolute; top: 3px; right: 3px;
width: 20px; height: 20px; display: grid; place-items: center;
border: 0; border-radius: 50%; cursor: pointer;
background: rgba(10, 12, 16, .62); color: #fff; line-height: 1;
font-size: 13px; font-weight: 700;
}
.fb-picked__drop:hover { background: var(--color-danger); }
.fb-picked__drop:focus-visible { box-shadow: var(--ring-soft); }
.fb-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fb-form__note { font-size: 11.5px; color: var(--color-faint); max-width: 260px; }
.fb-form.is-sending { opacity: .6; pointer-events: none; }
.fb-thread { display: flex; flex-direction: column; gap: 12px; }
.fb-thread__pending { margin: 0; font-size: 13px; color: var(--color-muted); font-style: italic; }
.fb-bubble {
max-width: 82%; padding: 13px 15px; border-radius: var(--radius-lg);
background: var(--color-surface-soft);
animation: fade-in .3s var(--ease) both;
}
.fb-bubble--out { align-self: flex-end; background: var(--color-primary-soft); }
.fb-bubble--in { align-self: flex-start; }
.fb-bubble__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; font-size: 12px; }
.fb-bubble__head strong { font-weight: 750; }
.fb-bubble__head span { color: var(--color-faint); font-size: 11.5px; }
.fb-bubble__text { margin: 0; font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.fb-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fb-shot { display: block; border-radius: var(--radius-md); overflow: hidden; max-width: 320px; }
.fb-shots .fb-shot { flex: 0 1 auto; max-width: 152px; }
.fb-shots:has(> .fb-shot:only-child) .fb-shot { max-width: 320px; }
.fb-shot img { display: block; width: 100%; height: auto; }
.supply-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.supply-shot {
display: block; flex: 0 0 auto; width: 84px; height: 84px;
border-radius: var(--radius-md); overflow: hidden;
border: 1px solid var(--color-border); background: var(--color-surface-soft);
}
.supply-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shift-list__item:has(> .supply-buy) { flex-wrap: wrap; }
.supply-buy { flex: 1 0 100%; margin-top: 10px; }
.detail-list--tight > div { padding: 7px 0; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.supply-modes { display: flex; flex-direction: column; }
.supply-mode__radio {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}
.supply-modes__pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.supply-mode {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px; cursor: pointer;
border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface-alt);
transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.supply-mode:hover { border-color: var(--color-border-strong); }
.supply-mode__icon {
flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center;
color: var(--color-muted); background: var(--color-surface-soft);
transition: color .18s var(--ease), background-color .18s var(--ease);
}
.supply-mode__icon svg { width: 20px; height: 20px; }
.supply-mode__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.supply-mode__title { font-size: 14.5px; font-weight: 700; color: var(--color-heading); }
.supply-mode__hint { font-size: 12.5px; line-height: 1.35; color: var(--color-muted); }
#supply-mode-ask:checked ~ .supply-modes__pick [for="supply-mode-ask"],
#supply-mode-buy:checked ~ .supply-modes__pick [for="supply-mode-buy"] {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
#supply-mode-ask:checked ~ .supply-modes__pick [for="supply-mode-ask"] .supply-mode__icon,
#supply-mode-buy:checked ~ .supply-modes__pick [for="supply-mode-buy"] .supply-mode__icon {
color: var(--color-primary); background: var(--color-primary-soft);
}
#supply-mode-ask:focus-visible ~ .supply-modes__pick [for="supply-mode-ask"],
#supply-mode-buy:focus-visible ~ .supply-modes__pick [for="supply-mode-buy"] {
outline: 2px solid var(--color-primary); outline-offset: 2px;
}
.supply-pane { display: none; padding-top: 16px; }
#supply-mode-ask:checked ~ .supply-pane--ask,
#supply-mode-buy:checked ~ .supply-pane--buy { display: block; }
.supply-ask,
.supply-own { max-width: 680px; }
.supply-ask textarea,
.supply-own textarea { min-height: 78px; }
.supply-lines { display: flex; flex-direction: column; gap: 10px; }
.supply-rows { display: flex; flex-direction: column; gap: 8px; }
.supply-row {
display: grid; grid-template-columns: minmax(0, 1fr) 116px 62px;
align-items: center; gap: 10px;
}
.supply-row--buy { grid-template-columns: minmax(0, 1fr) 116px 120px 28px; }
.supply-rows__head { gap: 10px; }
.supply-row__note { display: none; grid-column: 1 / -1; }
.supply-row:has(select option[value="other"]:checked) .supply-row__note { display: block; }
.form-actions--end { justify-content: flex-end; }
.supply-rows__cap { font-size: 12.5px; font-weight: 600; color: var(--color-muted); }
.supply-qty {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
align-items: stretch; min-height: var(--control-h);
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface); overflow: hidden;
}
.supply-qty:focus-within { border-color: var(--color-primary); box-shadow: var(--ring-soft); }
.supply-qty__btn {
display: none; width: 28px; border: 0; background: transparent; cursor: pointer;
font-size: 17px; line-height: 1; color: var(--color-muted);
transition: color .16s var(--ease), background-color .16s var(--ease);
}
.supply-qty__btn:hover { color: var(--color-primary); background: var(--color-primary-soft); }
html.has-js .supply-qty__btn { display: block; }
html:not(.has-js) .supply-qty { grid-template-columns: minmax(0, 1fr); }
.supply-qty__field {
min-width: 0; width: 100%; height: auto; padding: 0 4px; text-align: center;
border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.supply-qty__field:focus { border: 0; box-shadow: none; }
html.has-js .supply-qty__field::-webkit-outer-spin-button,
html.has-js .supply-qty__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html.has-js .supply-qty__field { -moz-appearance: textfield; appearance: textfield; }
.supply-row__drop {
display: none; min-height: var(--control-h); padding: 0 2px;
border: 0; background: transparent; cursor: pointer;
font-size: 12.5px; font-weight: 600; color: var(--color-muted);
transition: color .16s var(--ease);
}
.supply-row__drop--x { width: 28px; padding: 0; font-size: 18px; line-height: 1; }
.supply-row__drop:hover { color: var(--color-danger); }
html.has-js .supply-rows:has(.supply-row[data-supply-row] + .supply-row[data-supply-row]) .supply-row__drop {
display: inline-flex; align-items: center; justify-content: center;
}
.supply-rows__add {
align-self: flex-start; padding: 0; border: 0; background: transparent; cursor: pointer;
font-size: 13px; font-weight: 650; color: var(--color-primary);
}
.supply-rows__add:hover { text-decoration: underline; }
.supply-rows__add[hidden] { display: none; }
html:not(.has-js) .supply-rows__add { display: none; }
.supply-drop {
position: relative; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 5px; min-height: 116px; padding: 20px 18px;
text-align: center; cursor: pointer;
border: 1.5px dashed color-mix(in srgb, var(--color-primary) 36%, var(--color-border-strong));
border-radius: var(--radius-lg); background: var(--color-surface-alt);
transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .22s var(--ease);
}
.supply-drop:hover,
.supply-drop:focus-within,
.supply-drop.is-dragover {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-alt));
box-shadow: var(--ring-soft);
}
.supply-drop.is-filled { border-style: solid; border-color: var(--color-success); }
.supply-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.supply-drop__icon {
width: 34px; height: 34px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--color-primary); background: var(--color-primary-soft);
}
.supply-drop__icon svg { width: 19px; height: 19px; }
.supply-drop__title { font-size: 13.5px; font-weight: 700; color: var(--color-heading); }
.supply-drop__or { font-weight: 500; color: var(--color-muted); }
.supply-drop__hint { font-size: 12px; color: var(--color-muted); }
.supply-picked { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.supply-picked[hidden] { display: none; }
.supply-picked__item {
position: relative; width: 72px; height: 72px; border-radius: var(--radius-md);
overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-soft);
}
.supply-picked__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.supply-buy__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.supply-buy__wide { grid-column: 1 / -1; }
.supply-buy__grid textarea { min-height: var(--control-h); height: var(--control-h); padding-top: 10px; resize: vertical; }
@media (max-width: 640px) {
.supply-buy__grid { grid-template-columns: minmax(0, 1fr); }
}
.supply-log { list-style: none; margin: 4px 0 0; padding: 0; }
.supply-log__count {
padding: 3px 9px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); color: var(--color-muted);
font-size: 12px; font-weight: 700;
}
.supply-log__switch {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}
.supply-log__more { cursor: pointer; }
.supply-log__more-open,
.supply-log__more-close { display: inline-flex; align-items: center; gap: 6px; }
.supply-log__more-close { display: none; }
#supply-log-all:checked ~ .card__head .supply-log__more-open { display: none; }
#supply-log-all:checked ~ .card__head .supply-log__more-close { display: inline-flex; }
#supply-log-all:focus-visible ~ .card__head .supply-log__more {
outline: 2px solid var(--color-primary); outline-offset: 2px;
}
.supply-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
html:not(.has-js) .supply-quick { display: none; }
.supply-quick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.supply-quick__tile {
display: flex; flex-direction: column; align-items: center; gap: 8px;
min-height: 132px; justify-content: space-between;
padding: 16px 10px 12px; cursor: pointer; text-align: center;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface); color: var(--color-text);
transition: border-color .16s var(--ease), background-color .16s var(--ease),
box-shadow .16s var(--ease);
}
.supply-quick__tile:hover {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
box-shadow: var(--shadow-sm);
}
.supply-quick__icon { display: inline-flex; color: var(--color-heading); }
.supply-quick__icon svg { width: 30px; height: 30px; }
.supply-quick__tile:hover .supply-quick__icon { color: var(--color-primary); }
.supply-quick__name { font-size: 12.5px; font-weight: 650; line-height: 1.25; color: var(--color-heading); }
.supply-quick__add {
margin-top: 2px; padding: 5px 12px; border-radius: var(--radius-pill);
background: var(--color-primary-soft); color: var(--color-primary);
font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.supply-quick__tile.is-added { border-color: var(--color-success); }
.supply-quick__tile.is-added .supply-quick__add {
background: color-mix(in srgb, var(--color-success) 18%, transparent);
color: var(--color-success);
}
.supply-quick__note {
display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 0;
padding: 12px 14px; border-radius: var(--radius-lg); cursor: pointer;
border: 1px solid transparent; text-align: left;
background: var(--color-surface-alt); font-size: 12.5px; color: var(--color-muted);
transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.supply-quick__note:hover {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface-alt));
}
.supply-quick__note.is-added { border-color: var(--color-success); }
.supply-quick__note strong { display: block; color: var(--color-heading); font-size: 13px; }
.supply-quick__note-text { min-width: 0; }
.supply-quick__note-icon {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 32px; height: 32px; border-radius: var(--radius-md);
background: var(--color-primary-soft); color: var(--color-primary);
}
.supply-quick__note-icon svg { width: 18px; height: 18px; }
.supply-quick__note-chev {
flex: 0 0 auto; margin-left: auto; width: 7px; height: 7px;
border-right: 2px solid var(--color-faint); border-bottom: 2px solid var(--color-faint);
transform: rotate(-45deg);
}
.btn__glyph { width: 17px; height: 17px; flex: 0 0 auto; }
.btn-sm .btn__glyph { width: 15px; height: 15px; }
.supply-tip {
display: flex; align-items: flex-start; gap: 8px; margin: -2px 0 0;
font-size: 12.5px; color: var(--color-muted);
}
.supply-tip__badge {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 22px; height: 22px; margin-top: -2px; border-radius: var(--radius-sm);
background: var(--color-surface-alt); color: var(--color-primary);
}
.supply-tip__badge svg { width: 14px; height: 14px; }
.supply-rec__head {
display: grid; grid-template-columns: 186px minmax(0, 1fr) auto auto 18px;
align-items: center; gap: 12px; cursor: pointer; list-style: none;
}
.supply-rec__head::-webkit-details-marker { display: none; }
.supply-rec__when { font-size: 12px; color: var(--color-faint); }
.supply-rec__date { display: block; white-space: nowrap; }
.supply-rec__sub { display: block; }
.supply-rec__items { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.supply-rec__item { font-size: 14px; font-weight: 650; color: var(--color-heading); }
.supply-rec__qty { margin-left: 6px; font-weight: 600; color: var(--color-muted); }
.supply-rec__state { display: flex; align-items: center; gap: 10px; justify-self: end; }
.supply-rec__label { font-size: 12.5px; color: var(--color-muted); }
.supply-rec__shots { display: flex; gap: 6px; justify-self: end; }
.supply-rec__shot {
width: 30px; height: 30px; border-radius: var(--radius-sm); overflow: hidden;
border: 1px solid var(--color-border); background: var(--color-surface-soft);
}
.supply-rec__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.supply-rec__total { font-size: 13px; font-weight: 650; color: var(--color-heading); }
.supply-rec__mixed { font-size: 12px; color: var(--color-muted); }
.supply-rec__chev {
justify-self: end; width: 8px; height: 8px;
border-right: 2px solid var(--color-faint); border-bottom: 2px solid var(--color-faint);
transform: translateY(-25%) rotate(45deg);
transition: transform .18s var(--ease);
}
.supply-rec[open] .supply-rec__chev { transform: translateY(10%) rotate(-135deg); }
.supply-rec__body {
display: flex; flex-direction: column; gap: 8px;
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border);
}
.supply-log { display: flex; flex-direction: column; gap: 8px; }
.supply-log__row {
display: flex; flex-direction: column; gap: 7px;
padding: 13px 14px; border-radius: var(--radius-lg);
background: var(--color-surface-alt);
}
.supply-log__row--money {
background: color-mix(in srgb, var(--color-warning) 7%, var(--color-surface-alt));
}
.supply-log__row--extra { display: none; }
#supply-log-all:checked ~ .supply-log .supply-log__row--extra { display: flex; }
.supply-log__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.supply-log__meta { margin: 0; font-size: 12px; color: var(--color-faint); }
.supply-log__total { margin: 0; font-size: 13px; font-weight: 650; color: var(--color-heading); }
.supply-log__note { margin: 0; font-size: 13px; color: var(--color-muted); }
.supply-log .supply-shots { margin-top: 2px; }
.supply-log .supply-shot { width: 62px; height: 62px; }
.supply-line { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.supply-line__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.supply-line__name {
min-width: 0; margin-right: auto;
font-size: 14.5px; font-weight: 650; color: var(--color-heading);
}
.supply-line__qty { margin-left: 8px; font-weight: 600; color: var(--color-muted); }
.supply-line__sum { font-size: 13.5px; font-weight: 650; color: var(--color-heading); }
.supply-line__note { font-size: 13px; color: var(--color-muted); }
.supply-log__act {
padding: 0; border: 0; background: transparent; cursor: pointer;
font-size: 12.5px; font-weight: 600; color: var(--color-muted);
transition: color .16s var(--ease);
}
.supply-log__act:hover { color: var(--color-danger); }
.supply-line__row > .supply-buy { flex: 0 0 auto; }
.supply-line__row > .supply-buy[open] { flex: 1 0 100%; margin-top: 4px; }
.supply-log .supply-buy__summary { font-size: 12.5px; font-weight: 600; color: var(--color-muted); }
.supply-log .supply-buy__summary:hover { color: var(--color-primary); }
.supply-log .supply-buy__summary::before { content: none; }
.supply-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.supply-form .form-actions { margin: 0; }
.supply-buy__summary {
cursor: pointer; font-size: 13px; font-weight: 600;
color: var(--color-primary); list-style: none;
}
.supply-buy__summary::-webkit-details-marker { display: none; }
.supply-buy__summary::before { content: "+ "; }
.supply-buy[open] .supply-buy__summary::before { content: "− "; }
.fb-reply { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 10px; }
.fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fb-list__item { border-bottom: 1px solid var(--color-border); }
.fb-list__item:last-child { border-bottom: 0; }
.fb-list__link {
display: flex; flex-direction: column; gap: 5px;
padding: 14px 4px; text-decoration: none; color: inherit;
transition: background-color .16s var(--ease);
}
.fb-list__link:hover { background: var(--color-surface-soft); }
.fb-list__top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.fb-list__subject { font-size: 14px; font-weight: 700; color: var(--color-heading); }
.fb-list__excerpt { font-size: 13px; color: var(--color-muted); }
.fb-list__meta { font-size: 11.5px; color: var(--color-faint); }
@media (max-width: 600px) {
.fb-fab { right: 14px; bottom: 14px; height: 46px; }
.fb-bubble { max-width: 100%; }
.fb-modal { padding: 0; align-items: flex-end; }
.fb-modal__card { width: 100%; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}
.pc-verdict {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 16px 18px; border-radius: var(--radius-lg);
border: 1px solid var(--color-border); background: var(--color-surface);
box-shadow: var(--shadow-card);
}
.pc-verdict__dot {
width: 12px; height: 12px; border-radius: 50%; flex: none;
background: var(--color-muted);
}
.pc-verdict__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-verdict__title { font-size: 16px; font-weight: 800; color: var(--color-heading); }
.pc-verdict__hint { font-size: 12.5px; color: var(--color-muted); }
.pc-verdict__time { margin-left: auto; font-size: 11.5px; color: var(--color-faint); }
.pc-verdict--ok { border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border)); background: var(--color-success-soft); }
.pc-verdict--ok .pc-verdict__dot {
background: var(--color-success);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent);
animation: pc-pulse 2.4s ease-out infinite;
}
.pc-verdict--warning { border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border)); background: var(--color-warning-soft); }
.pc-verdict--warning .pc-verdict__dot { background: var(--color-warning); }
.pc-verdict--danger { border-color: color-mix(in srgb, var(--color-danger) 50%, var(--color-border)); background: var(--color-danger-soft); }
.pc-verdict--danger .pc-verdict__dot { background: var(--color-danger); }
.pc-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.pc-meter {
display: flex; flex-direction: column; gap: 9px;
padding: 16px 18px; border-radius: var(--radius-lg);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
animation: pop-in .34s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.pc-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pc-meter__label { font-size: 12.5px; font-weight: 650; color: var(--color-muted); }
.pc-meter__value {
font-size: 24px; font-weight: 800; line-height: 1;
color: var(--color-heading); font-variant-numeric: tabular-nums;
}
.pc-meter__track {
height: 9px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); overflow: hidden;
}
.pc-meter__fill {
display: block; height: 100%; width: var(--pc-share, 0%);
border-radius: var(--radius-pill); background: var(--gradient-brand);
animation: fill-grow .6s var(--ease) both;
}
.pc-meter__hint { font-size: 11.5px; color: var(--color-faint); line-height: 1.45; }
.pc-meter--warning { border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border)); }
.pc-meter--warning .pc-meter__fill { background: var(--color-warning); }
.pc-meter--warning .pc-meter__value { color: var(--color-warning); }
.pc-meter--danger { border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)); }
.pc-meter--danger .pc-meter__fill { background: var(--color-danger); }
.pc-meter--danger .pc-meter__value { color: var(--color-danger); }
.pc-meter--unknown .pc-meter__value { color: var(--color-faint); }
.pc-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pc-facts__row {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 8px 0; border-bottom: 1px solid var(--color-border);
font-size: 13px;
}
.pc-facts__row:last-child { border-bottom: 0; }
.pc-facts__row dt, .pc-facts__row > span:first-child { color: var(--color-muted); }
.pc-facts__row dd { margin: 0; }
.pc-facts__value { font-weight: 650; color: var(--color-heading); text-align: right; font-variant-numeric: tabular-nums; }
.pc-facts__value--warning { color: var(--color-warning); }
.pc-facts__value--danger { color: var(--color-danger); }
.pc-facts__value--unknown { color: var(--color-faint); }
.pc-facts--compact .pc-facts__row { padding: 5px 0; font-size: 12.5px; }
.pc-subtitle { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--color-faint); text-transform: uppercase; letter-spacing: .04em; }
.pc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.pc-badge {
font-size: 11.5px; font-weight: 700; padding: 3px 9px;
border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-muted);
}
.pc-badge--ok { background: var(--color-success-soft); color: var(--color-success); }
.pc-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.pc-badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chip {
font-size: 11.5px; font-weight: 650; padding: 3px 9px;
border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pc-chip--ok { background: var(--color-success-soft); color: var(--color-success); }
.pc-periods { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-period {
padding: 6px 14px; border-radius: var(--radius-pill);
font-size: 12.5px; font-weight: 650; text-decoration: none;
color: var(--color-muted); background: var(--color-surface);
border: 1px solid var(--color-border);
transition: color .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease);
}
.pc-period:hover { color: var(--color-heading); border-color: var(--color-border-strong); }
.pc-period.is-active {
color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary);
}
.pc-periods__hint { margin-left: auto; font-size: 11.5px; color: var(--color-faint); }
.pc-insights {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px;
}
.pc-insight {
display: flex; flex-direction: column; gap: 3px;
padding: 12px 14px; border-radius: var(--radius-md);
background: var(--color-surface-soft); border-left: 3px solid var(--color-border-strong);
}
.pc-insight__title { font-size: 13.5px; font-weight: 700; color: var(--color-heading); }
.pc-insight__hint { font-size: 12px; color: var(--color-muted); line-height: 1.45; }
.pc-insight--ok { border-left-color: var(--color-success); background: var(--color-success-soft); }
.pc-insight--warning { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.pc-insight--danger { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.pc-graphs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.pc-graph { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pc-graph__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pc-graph__title { margin: 0; font-size: 13px; font-weight: 700; color: var(--color-heading); }
.pc-graph__facts { display: flex; align-items: baseline; gap: 9px; font-variant-numeric: tabular-nums; }
.pc-graph__now { font-size: 15px; font-weight: 800; color: var(--color-heading); }
.pc-graph__peak { font-size: 11.5px; color: var(--color-faint); }
.pc-graph__plot { position: relative; }
.pc-graph__svg { display: block; width: 100%; height: 120px; overflow: visible; }
.pc-graph__grid { stroke: var(--color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pc-graph__area { fill: var(--color-primary); opacity: .12; }
.pc-graph__line {
fill: none; stroke: var(--color-primary); stroke-width: 2;
stroke-linejoin: round; stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.pc-graph__dot { fill: var(--color-primary); }
.pc-graph__scale {
position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column;
justify-content: space-between; pointer-events: none;
font-size: 10px; color: var(--color-faint); font-variant-numeric: tabular-nums;
}
.pc-graph__scale span { background: var(--color-surface); padding-right: 4px; line-height: 1; }
.pc-graph__foot {
display: flex; justify-content: space-between; gap: 8px;
font-size: 10.5px; color: var(--color-faint);
}
.pc-graph__avg { color: var(--color-muted); font-weight: 650; }
.pc-graph__blank { margin: 0; font-size: 12.5px; color: var(--color-faint); padding: 26px 0; text-align: center; }
.pc-graph.is-empty { opacity: .65; }
.pc-hours { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.pc-hours__col {
position: relative; flex: 1; height: 100%;
display: flex; align-items: flex-end; border-radius: var(--radius-sm); cursor: default;
}
.pc-hours__col:hover, .pc-hours__col:focus-visible { background: var(--color-surface-soft); outline: none; }
.pc-hours__bar {
width: 100%; min-height: 3px; height: max(3px, var(--pc-h, 0%));
border-radius: 3px 3px 1px 1px;
background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 45%, transparent));
animation: bar-grow .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 12ms);
}
.pc-hours__tip {
position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
display: none; flex-direction: column; gap: 1px; white-space: nowrap; z-index: 3;
padding: 6px 9px; border-radius: var(--radius-sm);
background: var(--color-heading); color: var(--color-surface); font-size: 11px;
}
.pc-hours__tip em { font-style: normal; opacity: .7; }
.pc-hours__col:hover .pc-hours__tip, .pc-hours__col:focus-visible .pc-hours__tip { display: flex; }
.pc-hours__axis {
display: flex; justify-content: space-between;
font-size: 10.5px; color: var(--color-faint); margin-top: 2px;
}
.pc-meter__value--sm { font-size: 17px; }
@media (prefers-reduced-motion: reduce) {
.pc-stat, .pc-chart__bar, .pc-bar__fill, .pc-cell-bar__fill,
.pc-main, .pc-credentials, .fb-bubble, .fb-modal__card, .fb-modal__backdrop,
.pc-meter, .pc-meter__fill, .pc-hours__bar {
animation: none !important;
}
.pc-pulse, .pc-verdict--ok .pc-verdict__dot { animation: none; }
.fb-fab, .pc-stat, .pc-ticket--card { transition: none; }
}
.notif-channel {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
padding: 14px 16px; border-radius: var(--radius-lg);
background: var(--color-surface-alt); border: 1px solid var(--color-border);
}
.notif-channel__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-channel__label { font-size: 12px; color: var(--color-faint); font-weight: 650; }
.notif-channel__value { font-size: 13.5px; word-break: break-word; }
.notif-channel__value--ok { color: var(--color-success); }
.notif-channel__value--bad { color: var(--color-danger); }
.notif-channel__value--warn { color: var(--color-warning); }
.push-browser__status { display: block; min-height: 20px; }
.push-browser__hint { display: block; margin-top: 8px; font-size: 13px; color: var(--color-faint); }
.notif-digest { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.notif-table td .checkbox { vertical-align: middle; }
.notif-always { display: flex; flex-direction: column; align-items: center; }
.notif-always::before { content: ""; height: 16px; }
.notif-always__note {
margin-top: 2px; font-size: 10.5px; line-height: 14px; color: var(--color-faint);
}
.pc-qr {
display: inline-flex; padding: 16px; border-radius: var(--radius-lg);
background: #fff; border: 1px solid var(--color-border);
align-self: flex-start;
}
.pc-qr svg { display: block; width: 264px; height: 264px; }
.pc-codes {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;
}
.pc-codes code {
display: block; padding: 9px 12px; border-radius: var(--radius-sm);
background: var(--color-surface-soft); border: 1px dashed var(--color-border-strong);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 14px; letter-spacing: .08em; text-align: center;
}
.pc-code-input {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 26px; letter-spacing: .34em; text-align: center; padding: 14px 12px;
}
.pc-gate { display: grid; place-items: center; min-height: 60vh; }
.pc-gate__card { width: min(420px, 100%); text-align: center; align-items: center; }
.pc-gate__icon { font-size: 34px; line-height: 1; }
.pc-gate__title { margin: 6px 0 2px; font-size: 20px; font-weight: 800; color: var(--color-heading); }
.pc-gate__sub { margin: 0 0 6px; font-size: 13.5px; color: var(--color-muted); }
.pc-gate__form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.pc-gate__hint { margin: 0; font-size: 12px; color: var(--color-faint); }
html[data-season] {
--season-accent: var(--color-primary);
--season-wash: transparent;
--season-particle: var(--color-primary);
--season-particle-2: var(--color-primary);
--season-alpha: .5;
}
html[data-season="winter"] {
--season-accent: #6BA5FF;
--season-wash: rgba(107, 165, 255, .12);
--season-particle: #7FB0FF;
--season-particle-2: #C3DAFF;
--season-alpha: .66;
}
html[data-theme="dark"][data-season="winter"] {
--season-accent: #9CC4FF;
--season-wash: rgba(120, 170, 255, .10);
--season-particle: #E6F0FF;
--season-particle-2: #B9D5FF;
--season-alpha: .46;
}
html[data-season] .topbar::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
pointer-events: none;
background: linear-gradient(90deg,
transparent, var(--season-accent) 24%, var(--season-accent) 76%, transparent);
opacity: .7;
}
html[data-season] .app-main {
background-image: radial-gradient(120% 40% at 50% 0, var(--season-wash), transparent 70%);
background-repeat: no-repeat;
}
.season-layer {
position: fixed; inset: 0; z-index: 26;
pointer-events: none; overflow: hidden;
}
html[data-season="winter"] {
--flake-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 1.5v21M2.9 6.75l18.2 10.5M2.9 17.25l18.2-10.5'/%3E%3Cpath d='M12 5.6 9.4 3M12 5.6l2.6-2.6M12 18.4 9.4 21M12 18.4l2.6 2.6'/%3E%3Cpath d='M6.7 8.6 3.1 8.5M6.7 8.6 4.8 11.7M17.3 15.4l3.6.1M17.3 15.4l1.9-3.1'/%3E%3Cpath d='M6.7 15.4 3.1 15.5M6.7 15.4 4.8 12.3M17.3 8.6l3.6-.1M17.3 8.6l1.9 3.1'/%3E%3C/g%3E%3C/svg%3E");
--flake-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M4 7.25l16 9.5M4 16.75l16-9.5'/%3E%3Cpath d='M12 7.4 9.9 5.2M12 7.4l2.1-2.2M12 16.6l-2.1 2.2M12 16.6l2.1 2.2'/%3E%3C/g%3E%3C/svg%3E");
--flake-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 4v16M5.1 8 18.9 16M5.1 16 18.9 8'/%3E%3C/g%3E%3C/svg%3E");
}
.season-particle {
position: absolute;
top: calc(-12vh * var(--vu));
left: calc(var(--x) * 1vw * var(--vu));
width: calc(var(--size) * 15px); height: calc(var(--size) * 15px);
opacity: 0;
will-change: transform;
animation: season-fall var(--dur) linear var(--delay) infinite;
}
html[data-season="winter"] .season-particle::before {
content: "";
display: block; width: 100%; height: 100%;
background: linear-gradient(150deg, var(--season-particle-2), var(--season-particle));
-webkit-mask: var(--flake-1) center / contain no-repeat;
mask: var(--flake-1) center / contain no-repeat;
filter: blur(max(0px, calc((1.15 - var(--size)) * .7px)));
animation:
season-sway var(--sway-dur) ease-in-out var(--delay) infinite alternate,
season-turn var(--turn-dur) linear var(--delay) infinite;
}
html[data-season="winter"] .season-particle[data-flake="2"]::before {
-webkit-mask-image: var(--flake-2);
mask-image: var(--flake-2);
}
html[data-season="winter"] .season-particle[data-flake="3"]::before {
-webkit-mask-image: var(--flake-3);
mask-image: var(--flake-3);
}
@keyframes season-fall {
0% { transform: translate3d(0, 0, 0); opacity: 0; }
8% { opacity: var(--season-alpha); }
88% { opacity: var(--season-alpha); }
100% {
transform: translate3d(calc(var(--drift) * 1vw * var(--vu)), calc(126vh * var(--vu)), 0);
opacity: 0;
}
}
@keyframes season-sway {
from { translate: calc(var(--sway) * -1px) 0; }
to { translate: calc(var(--sway) * 1px) 0; }
}
@keyframes season-turn {
from { rotate: 0deg; }
to { rotate: var(--spin); }
}
@media (prefers-reduced-motion: reduce) {
.season-particle, .season-particle::before { animation: none; opacity: 0; }
}
.season-grid {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.season-pick { position: relative; display: block; cursor: pointer; }
.season-pick input {
position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.season-pick__body {
display: flex; flex-direction: column; gap: 8px; height: 100%;
padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface);
transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.season-pick:hover .season-pick__body { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.season-pick input:checked + .season-pick__body {
border-color: var(--color-primary); box-shadow: var(--ring-soft);
}
.season-pick input:focus-visible + .season-pick__body { box-shadow: var(--ring); }
.season-pick__swatch {
height: 58px; border-radius: var(--radius-md); position: relative; overflow: hidden;
background: var(--color-surface-soft);
}
.season-pick__name { font-weight: 700; font-size: 14px; color: var(--color-heading); }
.season-pick__hint { font-size: 12px; color: var(--color-muted); line-height: 1.35; }
.season-pick__swatch {
--flake-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 1.5v21M2.9 6.75l18.2 10.5M2.9 17.25l18.2-10.5'/%3E%3Cpath d='M12 5.6 9.4 3M12 5.6l2.6-2.6M12 18.4 9.4 21M12 18.4l2.6 2.6'/%3E%3Cpath d='M6.7 8.6 3.1 8.5M6.7 8.6 4.8 11.7M17.3 15.4l3.6.1M17.3 15.4l1.9-3.1'/%3E%3Cpath d='M6.7 15.4 3.1 15.5M6.7 15.4 4.8 12.3M17.3 8.6l3.6-.1M17.3 8.6l1.9 3.1'/%3E%3C/g%3E%3C/svg%3E");
--flake-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M4 7.25l16 9.5M4 16.75l16-9.5'/%3E%3Cpath d='M12 7.4 9.9 5.2M12 7.4l2.1-2.2M12 16.6l-2.1 2.2M12 16.6l2.1 2.2'/%3E%3C/g%3E%3C/svg%3E");
}
.season-pick__swatch[data-swatch="off"] {
background:
repeating-linear-gradient(135deg,
var(--color-surface-soft) 0 8px, var(--color-surface-alt) 8px 16px);
}
.season-pick__swatch[data-swatch="auto"] {
background:
var(--flake-2) 20% 34% / 15px no-repeat,
var(--flake-1) 36% 74% / 12px no-repeat,
linear-gradient(102deg, #6BA5FF 0 52%, var(--color-surface-alt) 52%);
}
.season-pick__swatch[data-swatch="winter"] {
background:
var(--flake-1) 24% 32% / 17px no-repeat,
var(--flake-2) 62% 22% / 12px no-repeat,
var(--flake-1) 76% 70% / 13px no-repeat,
linear-gradient(160deg, #A9CCFF, #6BA5FF);
}
.imp-banner {
position: sticky; top: 0; z-index: 200;
display: flex; align-items: center; justify-content: center; gap: 14px;
padding: 9px 16px; flex-wrap: wrap;
background: repeating-linear-gradient(
-45deg,
var(--color-warning-soft), var(--color-warning-soft) 14px,
color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)) 14px,
color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)) 28px
);
border-bottom: 1px solid var(--color-warning);
color: var(--color-warning); font-size: 13px; font-weight: 650;
}
.imp-banner__btn {
padding: 5px 12px; border: 1px solid var(--color-warning);
border-radius: var(--radius-pill); background: var(--color-surface);
color: var(--color-warning); font: inherit; font-weight: 700; cursor: pointer;
}
.imp-banner__btn:hover { background: var(--color-warning); color: #fff; }
.pc-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-attn__item {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 13px; border-radius: var(--radius-md);
border-left: 3px solid var(--color-warning);
background: var(--color-warning-soft);
}
.pc-attn__item--danger { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.pc-attn__title { font-size: 13.5px; font-weight: 700; color: var(--color-heading); text-decoration: none; }
.pc-attn__title:hover { text-decoration: underline; }
.pc-attn__hint { font-size: 12px; color: var(--color-muted); }
@keyframes dash-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes dash-icon-in {
from { opacity: 0; transform: scale(.55) rotate(-14deg); }
62% { opacity: 1; transform: scale(1.09) rotate(3deg); }
to { opacity: 1; transform: none; }
}
@keyframes dash-wipe {
from { clip-path: inset(-30% 100% -30% -8%); }
to { clip-path: inset(-30% -8% -30% -8%); }
}
@keyframes dash-dot-in {
from { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes dash-attn {
0%, 100% { box-shadow: var(--shadow-card), 0 0 0 0 color-mix(in srgb, var(--color-danger) 40%, transparent); }
50% { box-shadow: var(--shadow-card), 0 0 0 7px color-mix(in srgb, var(--color-danger) 0%, transparent); }
}
@keyframes dash-flash {
from { box-shadow: var(--shadow-card), inset 0 0 0 100px color-mix(in srgb, var(--color-primary) 12%, transparent); }
to { box-shadow: var(--shadow-card), inset 0 0 0 100px transparent; }
}
[data-dash-motion] [data-dash-reveal]:not(.is-in) { opacity: 0; }
[data-dash-motion] [data-dash-reveal].is-in {
animation: dash-rise .52s var(--ease) var(--d, 0ms) backwards;
}
[data-dash-motion] .repcal.is-in .repday--mark {
animation: dash-icon-in .42s var(--ease) 280ms backwards;
}
[data-dash-motion] .dash-metric.is-in .metric-card__icon {
animation: dash-icon-in .5s var(--ease) calc(var(--d, 0ms) + 120ms) backwards;
}
[data-dash-motion] [data-dash-reveal]:not(.is-in) .dash-chart__fill { width: 0; }
[data-dash-motion] .dash-chart__fill { transition-delay: var(--rd, 0ms); }
[data-dash-motion] [data-dash-reveal]:not(.is-in) .dash-linechart__series {
clip-path: inset(-30% 100% -30% -8%);
}
[data-dash-motion] [data-dash-reveal].is-in .dash-linechart__series {
animation: dash-wipe 1.05s var(--ease) calc(var(--d, 0ms) + 80ms) backwards;
}
[data-dash-motion] [data-dash-reveal]:not(.is-in) .dash-linechart__dot--end { opacity: 0; }
[data-dash-motion] [data-dash-reveal].is-in .dash-linechart__dot--end {
animation: dash-dot-in .34s var(--ease) calc(var(--d, 0ms) + 1060ms) backwards;
}
@keyframes repcal-glow {
from { opacity: 0; transform: translateX(-28px); }
to { opacity: 1; transform: none; }
}
@keyframes repcal-line-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes repcal-pop-in {
from { opacity: 0; transform: scale(.86); }
to { opacity: 1; transform: none; }
}
@keyframes repcal-month-in {
from { transform: translateY(-100%); }
to { transform: none; }
}
@keyframes repcal-flip {
from { opacity: 0; transform: rotateX(-88deg); }
to { opacity: 1; transform: none; }
}
@keyframes repcal-cta-attn {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-warning) 46%, transparent); }
50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--color-warning) 0%, transparent); }
}
[data-dash-motion] .repcal.is-in::before {
animation: repcal-glow .8s var(--ease) 120ms backwards;
}
[data-dash-motion] .repcal.is-in .repcal__title { animation: repcal-line-in .42s var(--ease) 90ms backwards; }
[data-dash-motion] .repcal.is-in .repcal__summary { animation: repcal-line-in .42s var(--ease) 150ms backwards; }
[data-dash-motion] .repcal.is-in .repcal__cta { animation: repcal-pop-in .4s var(--ease) 210ms backwards; }
[data-dash-motion] .repcal.is-in .repslot { --slot-d: 250ms; }
[data-dash-motion] .repcal.is-in .repslot:nth-child(2) { --slot-d: 330ms; }
[data-dash-motion] .repcal.is-in .repslot:nth-child(3) { --slot-d: 410ms; }
[data-dash-motion] .repcal.is-in .repslot:nth-child(4) { --slot-d: 490ms; }
[data-dash-motion] .repcal.is-in .repslot {
animation: repcal-line-in .46s var(--ease) var(--slot-d) backwards;
}
[data-dash-motion] .repcal.is-in .repslot__month {
animation: repcal-month-in .42s var(--ease) calc(var(--slot-d) + 110ms) backwards;
}
[data-dash-motion] .repcal.is-in .repslot__day {
animation: repcal-flip .5s var(--ease) calc(var(--slot-d) + 170ms) backwards;
}
[data-dash-motion] .repcal.is-in .repslot__fact {
animation: repcal-line-in .4s var(--ease) calc(var(--slot-d) + 210ms) backwards;
}
[data-dash-motion] .repcal.is-in .repslot__when {
animation: repcal-pop-in .36s var(--ease) calc(var(--slot-d) + 250ms) backwards;
}
[data-dash-motion] .repcal.is-in .repslot__action {
animation: repcal-line-in .36s var(--ease) calc(var(--slot-d) + 300ms) backwards;
}
[data-dash-motion] .repcal--due.is-in .repcal__cta {
animation: repcal-pop-in .4s var(--ease) 210ms backwards,
repcal-cta-attn 1.5s var(--ease) 1100ms 2 backwards;
}
.repslot__leaf { perspective: 320px; }
.repslot__day { transform-origin: top center; }
.repslot__leaf { transition: transform .22s var(--ease); }
.repslot:hover .repslot__leaf { transform: translateY(-2px) rotate(-2.5deg); }
.dash-widget.is-fresh, .dash-metric.is-fresh { animation: dash-flash 1.1s var(--ease) backwards; }
[data-dash-motion] .dash-widget--critical.is-in,
[data-dash-motion] .dash-metric--critical.is-in {
animation: dash-rise .52s var(--ease) var(--d, 0ms) backwards,
dash-attn 1.5s var(--ease) calc(var(--d, 0ms) + 620ms) 2 backwards;
}
.metric-card__icon { transition: transform .22s var(--ease); }
.metric-card:hover .metric-card__icon { transform: scale(1.07) rotate(-3deg); }
.dash-list__item { transition: background-color .16s var(--ease); border-radius: var(--radius-md); }
.dash-list__item[data-row-href]:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-soft)); }
.sidebar-item__icon { transition: transform .18s var(--ease), opacity .18s var(--ease); }
.sidebar-item:hover .sidebar-item__icon { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
[data-dash-motion] [data-dash-reveal]:not(.is-in) { opacity: 1; }
[data-dash-motion] [data-dash-reveal]:not(.is-in) .dash-chart__fill { width: var(--w, 0); }
[data-dash-motion] [data-dash-reveal]:not(.is-in) .dash-linechart__series { clip-path: none; }
[data-dash-motion] [data-dash-reveal]:not(.is-in) .dash-linechart__dot--end { opacity: 1; }
[data-dash-motion] [data-dash-reveal],
[data-dash-motion] [data-dash-reveal].is-in,
[data-dash-motion] [data-dash-reveal].is-in .dash-linechart__series,
[data-dash-motion] [data-dash-reveal].is-in .dash-linechart__dot--end,
[data-dash-motion] .repcal.is-in .repday--mark,
[data-dash-motion] .repcal.is-in::before,
[data-dash-motion] .repcal.is-in .repcal__title,
[data-dash-motion] .repcal.is-in .repcal__summary,
[data-dash-motion] .repcal.is-in .repcal__cta,
[data-dash-motion] .repcal--due.is-in .repcal__cta,
[data-dash-motion] .repcal.is-in .repslot,
[data-dash-motion] .repcal.is-in .repslot__month,
[data-dash-motion] .repcal.is-in .repslot__day,
[data-dash-motion] .repcal.is-in .repslot__fact,
[data-dash-motion] .repcal.is-in .repslot__when,
[data-dash-motion] .repcal.is-in .repslot__action,
[data-dash-motion] .dash-metric.is-in .metric-card__icon,
.dash-widget.is-fresh, .dash-metric.is-fresh { animation: none; }
.metric-card__icon, .sidebar-item__icon, .repslot__leaf { transition: none; }
.metric-card:hover .metric-card__icon,
.repslot:hover .repslot__leaf { transform: none; }
}
@media print {
[data-dash-motion] [data-dash-reveal]:not(.is-in) { opacity: 1; }
[data-dash-motion] [data-dash-reveal]:not(.is-in) .dash-chart__fill { width: var(--w, 0); }
[data-dash-motion] [data-dash-reveal]:not(.is-in) .dash-linechart__series { clip-path: none; }
[data-dash-motion] [data-dash-reveal]:not(.is-in) .dash-linechart__dot--end { opacity: 1; }
}
.topbar {
--edge-pad: 22px;
padding-top: env(safe-area-inset-top);
height: calc(var(--topbar-h) + env(safe-area-inset-top));
padding-left: max(var(--edge-pad), env(safe-area-inset-left));
padding-right: max(var(--edge-pad), env(safe-area-inset-right));
}
.sidebar { padding-top: env(safe-area-inset-top); }
.page {
--edge-pad: 28px;
padding-left: max(var(--edge-pad), env(safe-area-inset-left));
padding-right: max(var(--edge-pad), env(safe-area-inset-right));
}
@media (max-width: 720px) {
.page { --edge-pad: 16px; }
.topbar { --edge-pad: 14px; }
}
@media (min-width: 820px) {
.topbar { --edge-pad: max(22px, calc((100% - var(--page-max)) / 2 + 28px)); }
}
html[data-display-mode="standalone"],
html[data-display-mode="standalone"] body {
overscroll-behavior-y: none;
}
.tabbar {
display: none;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
background: var(--topbar-tint);
border-top: 1px solid var(--color-border);
padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; padding: 7px 2px 6px; min-height: 54px;
background: none; border: 0; color: var(--color-muted);
font: inherit; font-size: 10px; font-weight: 600; text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.tabbar__icon-wrap {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 26px; border-radius: var(--radius-pill);
transition: background-color .2s var(--ease);
}
.tabbar__item.is-active .tabbar__icon-wrap { background: color-mix(in srgb, var(--sidebar-active) 15%, transparent); }
.tabbar__icon { width: 21px; height: 21px; transition: transform .2s var(--ease); }
.tabbar__item.is-active { color: var(--sidebar-active); }
html[data-theme="dark"] .tabbar__item.is-active { color: #8FB6FF; }
.tabbar__item.is-active .tabbar__icon { transform: translateY(-1px); }
.tabbar__item:active .tabbar__icon { transform: scale(.88); }
.tabbar__label {
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
letter-spacing: .01em;
}
.tabbar__icon-wrap .badge {
position: absolute; top: -3px; right: 4px; min-width: 16px; height: 16px;
padding: 0 4px; font-size: 9.5px; line-height: 16px; border-radius: var(--radius-pill);
pointer-events: none;
}
@media (max-width: 819px) {
.tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.page { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
.fb-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
.toast-stack { bottom: calc(84px + env(safe-area-inset-bottom)); }
.sidebar { z-index: 45; }
.sidebar-scrim { z-index: 44; }
}
.pwa-sheet { position: fixed; inset: 0; z-index: 130; }
.pwa-sheet[hidden] { display: none; }
.pwa-sheet__scrim {
position: absolute; inset: 0; border: 0; padding: 0;
background: rgba(6, 10, 20, .55); backdrop-filter: blur(2px);
opacity: 0; transition: opacity .26s var(--ease);
}
.pwa-sheet.is-open .pwa-sheet__scrim { opacity: 1; }
.pwa-sheet__panel {
position: absolute; left: 0; right: 0; bottom: 0;
width: min(460px, 100%); margin-inline: auto;
max-height: calc(94vh * var(--vu)); max-height: 94dvh; overflow-y: auto;
padding: 8px 22px calc(18px + env(safe-area-inset-bottom));
background: var(--color-surface);
border: 1px solid var(--color-border); border-bottom: 0;
border-radius: 26px 26px 0 0;
box-shadow: 0 -18px 60px rgba(4, 8, 18, .38);
transform: translateY(102%);
transition: transform .32s var(--ease-out);
}
.pwa-sheet.is-open .pwa-sheet__panel { transform: none; }
@media (min-width: 820px) {
.pwa-sheet__panel { bottom: 26px; border-radius: 26px; border-bottom: 1px solid var(--color-border); }
}
.pwa-sheet__grab {
display: block; width: 42px; height: 4px; margin: 6px auto 14px;
border: 0; padding: 0; border-radius: var(--radius-pill);
background: var(--color-border-strong); cursor: pointer;
}
.pwa-sheet__head { display: flex; align-items: center; gap: 14px; }
.pwa-sheet__icon {
width: 60px; height: 60px; flex: 0 0 auto;
border-radius: 22%;
box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.pwa-sheet__title { font-size: 19px; font-weight: 800; }
.pwa-sheet__subtitle { margin-top: 3px; font-size: 13px; color: var(--color-muted); }
.pwa-perks { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; gap: 12px; }
.pwa-perks__item { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; color: var(--color-muted); }
.pwa-perks__item svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; color: var(--color-primary); }
.pwa-perks__item strong { color: var(--color-text); font-weight: 700; }
.pwa-steps {
list-style: none; margin: 20px 0 0; padding: 20px 0 0; display: grid; gap: 13px;
border-top: 1px solid var(--color-border);
}
.pwa-steps__item { display: flex; align-items: flex-start; gap: 12px; }
.pwa-steps__num {
flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary); color: var(--color-on-primary);
font-size: 12.5px; font-weight: 800;
}
.pwa-steps__text { font-size: 13.5px; line-height: 1.55; padding-top: 2px; }
.pwa-key {
display: inline-flex; align-items: center; gap: 5px; vertical-align: -4px;
padding: 3px 7px; margin: 0 2px; border-radius: 8px;
background: var(--color-surface-soft); border: 1px solid var(--color-border);
color: var(--color-primary-dark); font-size: 12.5px; font-weight: 700;
}
.pwa-key svg { width: 15px; height: 15px; }
.pwa-key--wide { color: var(--color-text); }
.pwa-sheet__cta { width: 100%; margin-top: 18px; justify-content: center; }
.pwa-sheet__note { margin-top: 10px; font-size: 12px; color: var(--color-faint); text-align: center; }
.pwa-sheet__note--warn { color: var(--color-warning); text-align: left; }
.pwa-sheet__later {
display: block; width: 100%; margin-top: 12px; padding: 10px;
background: none; border: 0; color: var(--color-faint);
font: inherit; font-size: 13px; font-weight: 600;
}
.pwa-sheet__later:hover { color: var(--color-text); }
.pwa-sheet__later[hidden] { display: none; }
.pwa-nudge {
position: fixed; z-index: 125; left: 14px; right: 14px;
bottom: calc(84px + env(safe-area-inset-bottom));
width: min(420px, calc(100% - 28px)); margin-inline: auto;
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 15px; border-radius: var(--radius-lg);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-pop);
opacity: 0; transform: translateY(14px);
transition: opacity .24s var(--ease), transform .24s var(--ease-out);
}
.pwa-nudge[hidden] { display: none; }
.pwa-nudge.is-open { opacity: 1; transform: none; }
.pwa-nudge__icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--color-primary); margin-top: 2px; }
.pwa-nudge__body { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--color-muted); }
.pwa-nudge__body strong { font-size: 13.5px; color: var(--color-text); }
.pwa-nudge__actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
@media (max-width: 480px) {
.pwa-nudge { flex-wrap: wrap; }
.pwa-nudge__actions { flex-direction: row; width: 100%; }
.pwa-nudge__actions .btn { flex: 1; justify-content: center; }
}
@media (min-width: 820px) {
.pwa-nudge { bottom: 86px; left: auto; right: 26px; margin-inline: 0; }
}
body.is-sheet-open { overflow: hidden; }
.offline {
min-height: calc(100vh * var(--vu)); min-height: 100dvh;
display: grid; place-items: center; padding: 24px;
}
.offline__stage { width: min(400px, 100%); }
.offline__scene {
position: relative; height: 192px;
display: grid; place-items: center; pointer-events: none;
}
.offline__mascot {
position: relative; z-index: 1; width: 176px; height: auto;
margin-bottom: 6px;
filter: drop-shadow(0 16px 22px rgba(9, 11, 18, 0.26));
animation: offlineFloat 5.4s ease-in-out infinite;
}
.offline__glow {
position: absolute; width: 230px; height: 230px; border-radius: 50%;
background: radial-gradient(circle,
color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 68%);
}
.offline__wave {
position: absolute; top: 6px; width: 168px; height: 168px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
-webkit-mask-image: linear-gradient(180deg, #000 0 34%, transparent 52%);
mask-image: linear-gradient(180deg, #000 0 34%, transparent 52%);
animation: offlineWave 2.8s ease-out infinite;
}
.offline__shadow {
position: absolute; bottom: 0; width: 108px; height: 12px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(9, 11, 18, 0.2), transparent 70%);
animation: offlineShadow 5.4s ease-in-out infinite;
}
@keyframes offlineFloat {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-9px) rotate(1.5deg); }
}
@keyframes offlineShadow {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.88); opacity: 0.7; }
}
@keyframes offlineWave {
0% { transform: scale(0.72); opacity: 0; }
35% { opacity: 0.9; }
100% { transform: scale(1.25); opacity: 0; }
}
.offline__card {
position: relative; width: 100%; text-align: center;
padding: 28px 26px; border-radius: var(--radius-xl);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-pop);
}
.offline__title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.offline__text { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--color-muted); }
.offline__retry { width: 100%; margin-top: 20px; justify-content: center; }
.offline__hint {
margin-top: 12px; font-size: 12px; color: var(--color-faint);
display: flex; align-items: baseline; justify-content: center; gap: 1px;
}
.offline__dots { display: inline-flex; align-items: baseline; gap: 3px; margin-left: 4px; }
.offline__dots i {
width: 3px; height: 3px; border-radius: 50%; background: currentColor;
animation: offlineDot 1.4s ease-in-out infinite;
}
.offline__dots i:nth-child(2) { animation-delay: 0.18s; }
.offline__dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes offlineDot {
0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-2px); }
}
.offline__note {
margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border);
font-size: 11.5px; line-height: 1.55; color: var(--color-faint);
}
@media (prefers-reduced-motion: reduce) {
.offline__mascot, .offline__shadow, .offline__wave, .offline__dots i { animation: none; }
.offline__wave { opacity: 0.55; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.pwa-sheet__panel, .pwa-sheet__scrim, .pwa-nudge,
.tabbar__icon, .tabbar__icon-wrap { transition: none; }
}
@media (max-width: 560px) {
.chat-thread__link { gap: 10px; padding: 12px 8px; }
.chat-thread__aside { max-width: 88px; }
.chat-thread__aside .cell-muted { white-space: normal; text-align: right; line-height: 1.35; }
.chat-thread__name .role-badge {
display: inline-block;
min-width: 0; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
}
.qhero {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 28px; margin-bottom: 16px;
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
background:
radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--color-primary) 22%, transparent) 0%, transparent 62%),
var(--color-surface);
box-shadow: var(--shadow-card);
}
.qhero__eyebrow {
display: inline-block; margin-bottom: 8px;
font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-primary);
}
.qhero__title { font-size: 27px; font-weight: 800; line-height: 1.18; color: var(--color-heading); }
.qhero__text { margin-top: 10px; max-width: 62ch; font-size: 13.5px; line-height: 1.6; color: var(--color-muted); }
.qhero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.qhero__fact {
padding: 6px 12px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); border: 1px solid var(--color-border);
font-size: 12.5px; color: var(--color-muted);
}
.qhero__fact b { color: var(--color-text); font-weight: 700; }
.qhero__fact--auto { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); }
.qhero__ring { position: relative; flex: 0 0 96px; width: 96px; height: 96px; }
.qhero__ring-dot {
position: absolute; inset: 0; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
animation: qpulse 3.4s ease-out infinite;
}
.qhero__ring-dot:nth-child(2) { animation-delay: 1.1s; }
.qhero__ring-dot:nth-child(3) { animation-delay: 2.2s; }
@keyframes qpulse {
0% { transform: scale(.45); opacity: 0; }
25% { opacity: .9; }
100% { transform: scale(1); opacity: 0; }
}
.qhero--applied { border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-border)); }
.qhero__done {
position: absolute; right: 22px; bottom: 18px;
display: flex; align-items: center; gap: 10px;
padding: 8px 14px 8px 10px; border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-success) 45%, var(--color-border));
font-size: 13px; font-weight: 600; color: var(--color-text);
}
.qhero__check { width: 26px; height: 26px; stroke: var(--color-success); stroke-width: 4; }
.qhero__check-circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: qdraw .5s ease-out forwards; }
.qhero__check-mark {
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 48; stroke-dashoffset: 48;
animation: qdraw .35s .4s ease-out forwards;
}
@keyframes qdraw { to { stroke-dashoffset: 0; } }
.qsetup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (min-width: 1180px) {
.qsetup { grid-template-columns: minmax(0, 1fr) 372px; align-items: start; }
.qside { position: sticky; top: 16px; }
}
.qsetup__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.qside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.qrate__input { min-width: 0; }
.qstep {
padding: 22px; border-radius: var(--radius-xl);
background: var(--color-surface); border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
}
.qstep { animation: qstepin .45s ease var(--qstep-delay, 0ms) both; }
@keyframes qstepin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qstep__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.qstep__num {
flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center;
background: var(--color-primary); color: var(--color-on-primary);
font-size: 14px; font-weight: 800;
}
.qstep__titles { min-width: 0; }
.qstep__title { font-size: 17px; font-weight: 700; color: var(--color-heading); }
.qstep__hint { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.qstep__flag {
margin-left: auto; flex: 0 0 auto; align-self: center;
padding: 4px 10px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); border: 1px solid var(--color-border);
font-size: 11.5px; color: var(--color-muted); white-space: nowrap;
}
.qstep__note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.qrate { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.qrate__amount { display: grid; gap: 6px; }
.qrate__label { font-size: 12px; font-weight: 600; color: var(--color-muted); }
.qrate__input-wrap { position: relative; display: inline-flex; align-items: center; }
.qrate__input {
width: 210px; padding: 10px 44px 10px 16px;
border-radius: var(--radius-lg); border: 1px solid var(--color-border-strong);
background: var(--color-surface-alt); color: var(--color-heading);
font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums;
transition: border-color .18s ease, box-shadow .18s ease;
}
.qrate__input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
.qrate__input::-webkit-outer-spin-button,
.qrate__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qrate__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qrate__currency {
position: absolute; right: 16px; pointer-events: none;
font-size: 20px; font-weight: 700; color: var(--color-faint);
}
.qrate__from { margin-top: 16px; display: grid; gap: 8px; max-width: 340px; }
.qrate__missing { font-size: 12px; line-height: 1.5; color: var(--color-faint); }
.qseg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--radius-pill); background: var(--color-surface-soft); }
.qseg__item { position: relative; }
.qseg__item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.qseg__item span {
display: block; padding: 0 16px; border-radius: var(--radius-pill);
min-height: var(--control-h-sm); display: grid; place-items: center;
font-size: 13px; font-weight: 600; color: var(--color-muted);
cursor: pointer; transition: background .18s ease, color .18s ease;
}
.qseg__item input:checked + span { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-xs); }
.qseg__item input:focus-visible + span { box-shadow: var(--ring); }
.qwho { margin-top: 18px; }
.qwho__label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--color-muted); }
.qwho__list { display: grid; gap: 8px; }
.qwho__opt { position: relative; display: block; cursor: pointer; }
.qwho__opt input { position: absolute; opacity: 0; }
.qwho__body {
display: grid; gap: 2px; padding: 11px 14px 11px 40px;
border-radius: var(--radius-lg); border: 1px solid var(--color-border);
background: var(--color-surface-alt);
transition: border-color .18s ease, background .18s ease;
}
.qwho__body::before {
content: ""; position: absolute; left: 14px; top: 15px;
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid var(--color-border-strong); background: var(--color-surface);
transition: border-color .18s ease, box-shadow .18s ease;
}
.qwho__opt input:checked + .qwho__body {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.qwho__opt input:checked + .qwho__body::before {
border-color: var(--color-primary);
box-shadow: inset 0 0 0 3px var(--color-surface), inset 0 0 0 9px var(--color-primary);
}
.qwho__opt input:focus-visible + .qwho__body { box-shadow: var(--ring); }
.qwho__body b { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.qwho__body small { font-size: 12px; line-height: 1.45; color: var(--color-muted); }
.qcards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.qcard { position: relative; display: block; cursor: pointer; }
.qcard input { position: absolute; opacity: 0; }
.qcard__inner {
position: relative; display: grid; gap: 6px; height: 100%;
padding: 16px 16px 18px; border-radius: var(--radius-lg);
border: 1px solid var(--color-border); background: var(--color-surface-alt);
transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.qcard:hover .qcard__inner { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.qcard input:focus-visible + .qcard__inner { box-shadow: var(--ring); }
.qcard__badge {
position: absolute; top: -9px; left: 14px;
padding: 3px 9px; border-radius: var(--radius-pill);
background: var(--color-primary); color: var(--color-on-primary);
font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.qcard__mark { font-size: 22px; line-height: 1; }
.qcard__name { font-size: 15px; font-weight: 700; color: var(--color-heading); }
.qcard__tagline { font-size: 12.5px; font-weight: 600; color: var(--color-primary); }
.qcard__text { font-size: 12px; line-height: 1.5; color: var(--color-muted); }
.qcard__tick {
position: absolute; top: 12px; right: 12px;
width: 20px; height: 20px; border-radius: 50%;
border: 1px solid var(--color-border-strong); background: var(--color-surface);
transform: scale(.7); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.qcard__tick::after {
content: ""; position: absolute; left: 6px; top: 3px;
width: 5px; height: 10px; border: solid var(--color-on-primary);
border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.qcard input:checked + .qcard__inner {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
}
.qcard input:checked + .qcard__inner .qcard__tick {
opacity: 1; transform: scale(1);
background: var(--color-primary); border-color: var(--color-primary);
}
.qladder { margin-top: 14px; display: grid; gap: 6px; }
.qladder__row {
display: grid; grid-template-columns: 78px minmax(0, 1fr) 84px; align-items: center; gap: 10px;
font-size: 12.5px; color: var(--color-muted);
animation: qslide .32s ease var(--qladder-delay, 0ms) both;
}
.qladder__row.is-zero { opacity: .55; }
.qladder__range { font-variant-numeric: tabular-nums; }
.qladder__bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-soft); overflow: hidden; }
.qladder__bar i {
display: block; height: 100%; border-radius: inherit;
background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, var(--color-coral)));
transition: width .4s cubic-bezier(.2, .7, .3, 1);
}
.qladder__percent { text-align: right; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
@keyframes qslide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.qextra, .qauto { margin-top: 16px; display: grid; gap: 10px; }
.qtoggle { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 12px; cursor: pointer; }
.qtoggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.qtoggle__track {
position: relative; width: 44px; height: 26px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); border: 1px solid var(--color-border-strong);
transition: background .2s ease, border-color .2s ease;
}
.qtoggle__track::after {
content: ""; position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--color-surface); box-shadow: var(--shadow-xs);
transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
.qtoggle input:checked + .qtoggle__track { background: var(--color-primary); border-color: var(--color-primary); }
.qtoggle input:checked + .qtoggle__track::after { transform: translateX(18px); }
.qtoggle input:focus-visible + .qtoggle__track { box-shadow: var(--ring); }
.qtoggle__body { display: grid; gap: 3px; padding-top: 2px; }
.qtoggle__body b { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.qtoggle__body small { font-size: 12px; line-height: 1.45; color: var(--color-muted); }
.qmoney { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding-left: 56px; }
.qmoney[hidden] { display: none !important; }
.qwhen { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.qwhen__field { display: grid; gap: 6px; min-width: 132px; }
.qwhen__sentence {
flex: 1 1 240px; min-width: 200px;
padding: 10px 14px; border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
font-size: 12.5px; line-height: 1.5; color: var(--color-text);
}
.qwhen__sentence.is-off {
background: var(--color-surface-soft);
border-color: var(--color-border); color: var(--color-muted);
}
.qpreview {
padding: 22px; border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
background:
radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 60%),
var(--color-surface);
box-shadow: var(--shadow-card);
}
.qpreview__eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--color-primary);
}
.qpreview__title { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--color-heading); }
.qpreview__total { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.qpreview__total b {
font-size: 38px; font-weight: 800; line-height: 1;
color: var(--color-heading); font-variant-numeric: tabular-nums;
}
.qpreview__total span { font-size: 20px; font-weight: 700; color: var(--color-faint); }
.qpreview__sub { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.qbars { margin-top: 16px; display: grid; gap: 10px; }
.qbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 12px; }
.qbar__label { color: var(--color-muted); }
.qbar__value { text-align: right; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.qbar__track {
grid-column: 1 / -1; height: 9px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); overflow: hidden;
}
.qbar__fill {
display: block; height: 100%; width: 0; border-radius: inherit;
background: var(--color-primary);
transition: width .45s cubic-bezier(.2, .7, .3, 1);
}
.qbar--bonus .qbar__fill { background: linear-gradient(90deg, var(--color-coral), var(--color-primary)); }
.qbar.is-empty .qbar__fill { background: var(--color-border-strong); }
.qscenario { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.qscenario__btn {
padding: 6px 12px; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-surface-alt);
font-size: 12px; font-weight: 600; color: var(--color-muted); cursor: pointer;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.qscenario__btn:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.qscenario__btn.is-active {
border-color: var(--color-primary); color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.qshifts { display: grid; gap: 6px; margin-top: 14px; }
.qshifts__label { font-size: 12px; color: var(--color-muted); }
.qshifts__label b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.qshifts input[type="range"] { width: 100%; accent-color: var(--color-primary); }
.qpreview__lines { margin-top: 14px; display: grid; gap: 7px; }
.qpreview__lines li {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding-top: 7px; border-top: 1px solid var(--color-border);
font-size: 12.5px; color: var(--color-muted);
}
.qpreview__lines li:first-child { border-top: none; padding-top: 0; }
.qpreview__lines b { color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.qpreview__note { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--color-faint); }
.qapply {
padding: 16px; border-radius: var(--radius-xl);
border: 1px solid var(--color-border); background: var(--color-surface);
box-shadow: var(--shadow-card); display: grid; gap: 10px;
}
.qapply__btn { position: relative; justify-content: center; }
.qapply__btn.is-busy { pointer-events: none; opacity: .75; }
.qapply__btn.is-busy::after {
content: ""; position: absolute; right: 16px; top: 50%; margin-top: -8px;
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--color-on-primary) 35%, transparent);
border-top-color: var(--color-on-primary);
animation: qspin .7s linear infinite;
}
@keyframes qspin { to { transform: rotate(360deg); } }
.qapply__note { font-size: 12px; line-height: 1.5; color: var(--color-muted); }
.qapply__link { font-size: 12.5px; font-weight: 600; color: var(--color-primary); }
@media (max-width: 720px) {
.qhero { flex-direction: column; align-items: flex-start; padding: 20px; }
.qseg { display: flex; flex-wrap: wrap; width: 100%; }
.qseg__item { flex: 1 1 auto; }
.qseg__item span { padding: 0 10px; font-size: 12.5px; text-align: center; }
.qhero__ring { display: none; }
.qhero__done { position: static; margin-top: 14px; }
.qhero__title { font-size: 22px; }
.qrate__input { width: 100%; font-size: 26px; }
.qrate__amount { flex: 1 1 100%; }
.qmoney { padding-left: 0; }
.qladder__row { grid-template-columns: 68px minmax(0, 1fr) 74px; }
}
@media (prefers-reduced-motion: reduce) {
.qhero__ring-dot, .qhero__check-circle, .qhero__check-mark,
.qladder__row, .qapply__btn.is-busy::after { animation: none; }
.qhero__check-circle, .qhero__check-mark { stroke-dashoffset: 0; }
.qstep { animation: none; }
.qcard__inner, .qcard__tick, .qbar__fill,
.qladder__bar i, .qtoggle__track, .qtoggle__track::after { transition: none; }
}
.fadv {
margin-top: 16px; border-radius: var(--radius-xl);
border: 1px solid var(--color-border); background: var(--color-surface);
box-shadow: var(--shadow-card);
}
.fadv__summary {
display: grid; gap: 3px; padding: 16px 20px 16px 44px;
position: relative; cursor: pointer; list-style: none;
}
.fadv__summary::-webkit-details-marker { display: none; }
.fadv__summary::before {
content: ""; position: absolute; left: 20px; top: 22px;
width: 8px; height: 8px; border: solid var(--color-faint);
border-width: 0 2px 2px 0; transform: rotate(-45deg);
transition: transform .2s ease;
}
.fadv[open] .fadv__summary::before { transform: rotate(45deg); top: 20px; }
.fadv__summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xl); }
.fadv__title { font-size: 15px; font-weight: 700; color: var(--color-heading); }
.fadv__hint { font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.fadv__body { padding: 0 20px 20px; }
.fadv__body > .formula-section:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
.fadv__summary::before { transition: none; }
}
.rating-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 9px; border-radius: var(--radius-pill);
font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
border: 1px solid transparent; white-space: nowrap;
}
.rating-pill--top { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 32%, transparent); }
.rating-pill--good { background: var(--color-info-soft); color: var(--color-info); border-color: color-mix(in srgb, var(--color-info) 32%, transparent); }
.rating-pill--watch { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 34%, transparent); }
.rating-pill--risk { background: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 36%, transparent); }
.rating-pill--none { background: var(--color-surface-soft); color: var(--color-muted); border-color: var(--color-border); }
.mp-chip {
--mp-chip: var(--color-muted);
display: inline-flex; align-items: center;
padding: 2px 9px; border-radius: var(--radius-pill);
font-size: 12.5px; font-weight: 650; white-space: nowrap;
background: color-mix(in srgb, var(--mp-chip) 14%, transparent);
color: color-mix(in srgb, var(--mp-chip) 78%, var(--color-text));
border: 1px solid color-mix(in srgb, var(--mp-chip) 34%, transparent);
}
.mp-note { max-width: 42ch; white-space: normal; }
.rating-value { font-variant-numeric: tabular-nums; }
.rating-value--top { color: var(--color-success); }
.rating-value--good { color: var(--color-info); }
.rating-value--watch { color: var(--color-warning); }
.rating-value--risk { color: var(--color-danger); }
.rating-value--none { color: var(--color-muted); }
.rating-delta {
display: inline-flex; align-items: center; gap: 3px;
font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rating-delta--up { color: var(--color-success); }
.rating-delta--down { color: var(--color-danger); }
.rating-delta--flat { color: var(--color-muted); font-weight: 600; }
.rating-delta--up::before { content: "▲"; font-size: 9px; }
.rating-delta--down::before { content: "▼"; font-size: 9px; }
.rating-spark { display: block; width: 92px; height: 24px; }
.rating-spark--top { color: var(--color-success); }
.rating-spark--good { color: var(--color-info); }
.rating-spark--watch { color: var(--color-warning); }
.rating-spark--risk { color: var(--color-danger); }
.rating-bar {
display: flex; gap: 3px; margin: 4px 0 14px;
height: 34px; border-radius: var(--radius-md); overflow: hidden;
}
.rating-bar__seg {
display: flex; align-items: center; justify-content: center;
min-width: 28px; font-size: 12.5px; font-weight: 700; color: #fff;
}
.rating-bar__seg--top { background: var(--color-success); }
.rating-bar__seg--good { background: var(--color-info); }
.rating-bar__seg--watch { background: var(--color-warning); }
.rating-bar__seg--risk { background: var(--color-danger); }
.rating-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rating-legend__item {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--color-text);
}
.rating-legend__title { font-weight: 650; }
.rating-legend__hint { color: var(--color-muted); font-size: 12.5px; }
.rating-legend__count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.rating-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rating-dot--top { background: var(--color-success); }
.rating-dot--good { background: var(--color-info); }
.rating-dot--watch { background: var(--color-warning); }
.rating-dot--risk { background: var(--color-danger); }
.rating-stale {
margin-bottom: 16px; padding: 12px 16px;
border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
border-left-width: 3px; border-radius: var(--radius-md);
background: var(--color-warning-soft); color: var(--color-warning);
font-size: 13px; line-height: 1.5;
}
.rating-note { margin: 12px 0 0; font-size: 12.5px; color: var(--color-muted); }
.rating-card__body {
display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px;
}
.rating-card__now { display: flex; align-items: center; gap: 10px; }
.rating-card__now .rating-value { font-size: 38px; font-weight: 800; line-height: 1; }
.rating-card__facts { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.rating-fact { display: grid; gap: 2px; }
.rating-fact__label {
font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--color-faint);
}
.rating-fact__value { display: grid; gap: 1px; font-size: 14px; font-weight: 650; }
.rating-card__spark { display: grid; gap: 3px; margin-left: auto; }
.rating-card__spark .rating-spark { width: 140px; height: 36px; }
.rating-history {
list-style: none; margin: 14px 0 0; padding: 12px 0 0; display: flex;
flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--color-border);
}
.rating-history__item {
display: grid; gap: 1px; justify-items: center;
padding: 5px 10px; border-radius: var(--radius-md);
background: var(--color-surface-soft); min-width: 62px;
}
.rating-history__date { font-size: 11px; color: var(--color-muted); }
.rating-history__value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.rating-card__spark { margin-left: 0; }
.rating-card__spark .rating-spark { width: 100%; }
}
.rating-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rating-move {
display: grid; gap: 3px;
padding: 10px 13px; border-radius: var(--radius-md);
background: var(--color-surface-soft);
}
.rating-move__label {
font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--color-faint);
}
.rating-move__hint { font-size: 12.5px; color: var(--color-muted); }
.rating-move .rating-delta { font-size: 20px; }
.rating-moves--rows { gap: 6px; }
.rating-move--row {
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center; gap: 12px; padding: 8px 12px;
}
.rating-move--row .rating-delta { font-size: 14px; justify-self: end; min-width: 62px; }
.rating-move__pvz { display: grid; gap: 1px; min-width: 0; color: inherit; text-decoration: none; }
.rating-move__address {
font-size: 13.5px; font-weight: 650; color: var(--color-heading);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rating-move__pvz:hover .rating-move__address { color: var(--color-primary); }
.rating-move__values {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; color: var(--color-muted); white-space: nowrap;
}
@media (max-width: 640px) {
.rating-move--row { grid-template-columns: minmax(0, 1fr) auto; }
.rating-move--row .rating-move__values { grid-column: 1 / -1; }
}
.shiftpage__main,
.shiftpage__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.shiftpage__side { position: sticky; top: calc(var(--topbar-h) + 16px); align-self: start; }
.shiftpage__history { grid-column: 1 / -1; }
.shiftpage__mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
.card--mini { padding: 16px 18px; gap: 11px; }
.card--mini .card__title { font-size: 15px; }
.card--mini .detail-list > div { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; }
.card--mini .detail-list dd { text-align: right; overflow-wrap: anywhere; }
.timeline.timeline--grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 12px 26px;
}
@media (max-width: 880px) {
.shiftpage__side { position: static; }
}
.claim-row td { position: relative; }
.claim-row--danger td:first-child::before,
.claim-row--warning td:first-child::before,
.claim-row--signed td:first-child::before,
.claim-row--done td:first-child::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.claim-row--danger td:first-child::before { background: var(--color-danger); }
.claim-row--warning td:first-child::before { background: var(--color-warning); }
.claim-row--done td:first-child::before { background: var(--color-success); }
.claim-row--danger td { background: color-mix(in srgb, var(--color-danger) 6%, transparent); }
.claim-row--warning td { background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
.claim-row--signed td:first-child::before { background: var(--color-success); }
.claim-row--signed td { background: color-mix(in srgb, var(--color-success) 9%, transparent); }
.claim-row--muted td { opacity: .62; }
.claim-row__reason { max-width: 320px; }
.claim-row__reason-text {
display: block; font-weight: 650;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.claim-row__reason .badge { margin-top: 3px; }
.table--claims .btn-sm { white-space: nowrap; }
.table--claims td:last-child { white-space: nowrap; }
.table--claims td:last-child .btn + .btn { margin-left: 6px; }
.claim-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.claim-legend__item {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--color-muted);
}
.claim-legend__item::before {
content: ""; width: 10px; height: 3px; border-radius: 2px; flex: none;
}
.claim-legend__item--danger::before { background: var(--color-danger); }
.claim-legend__item--warning::before { background: var(--color-warning); }
.claim-legend__item--done::before { background: var(--color-success); }
.claim-legend__item--signed::before { background: var(--color-success); }
.claim-legend__item--muted::before { background: var(--color-border); }
.claim-legend__item--unread::before { display: none; }
.claim-legend__item--unread .thread-chip { height: 18px; margin: 0; vertical-align: 0; }
.claim-legend__item--unread .thread-chip svg { width: 11px; height: 11px; }
.claim-empty-hint { text-align: center; margin-top: -8px; }
.claim-breakdown { padding: 0; }
.claim-breakdown__toggle {
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
padding: 14px 18px; font-weight: 750; font-size: 13.5px;
}
.claim-breakdown__toggle::-webkit-details-marker { display: none; }
.claim-breakdown__toggle svg { width: 15px; height: 15px; transition: transform .16s var(--ease); }
.claim-breakdown[open] .claim-breakdown__toggle svg { transform: rotate(180deg); }
.claim-breakdown__sum { margin-left: auto; color: var(--color-muted); font-weight: 600; }
.claim-breakdown__body { padding: 0 18px 18px; }
.claim-assign__facts {
display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px;
padding: 12px 14px; border-radius: var(--radius-md);
background: var(--color-surface-soft);
}
.claim-assign__fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.claim-assign__fact em { font-style: normal; font-size: 11.5px; color: var(--color-muted); font-weight: 700; }
.claim-assign__fact b { font-size: 13.5px; font-weight: 800; }
.claim-assign__count { margin-top: 12px; }
.cell-modal__dialog textarea.input { min-height: 60px; }
.pvz-pick { position: relative; display: block; min-width: 0; }
.pvz-pick__native,
.pvz-pick[data-pvz-ready] > select { position: absolute; opacity: 0; pointer-events: none; width: 100%; }
[id="turbo-tariff"],
[id="turbo-tariff-trend"],
[id^="turnover-"] { scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px); }
.tw-rows-note { margin-left: auto; }
.turnover-pvz.is-focus {
box-shadow: inset 0 0 0 2px var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
html.has-js select[data-pvz-pick][multiple]:not(.pvz-pick__native) {
height: var(--pick-collapsed-h, var(--control-h)); overflow: hidden; color: transparent;
}
.pvz-pick__button {
width: 100%; text-align: left; cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--color-muted);
}
.pvz-pick.is-open .pvz-pick__button { cursor: text; }
.pvz-pick.is-set .pvz-pick__button { color: var(--color-text); font-weight: 650; }
.pvz-pick.is-open .pvz-pick__button { border-color: var(--color-primary); }
.pvz-pick__pop {
position: fixed; z-index: 40; top: 0; left: 0;
width: 280px; padding: 8px;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.pvz-pick__pop[hidden] { display: none; }
.pvz-pick__list { max-height: 260px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.pvz-pick__list li[hidden] { display: none; }
.pvz-pick__option {
display: block; width: 100%; text-align: left; cursor: pointer;
padding: 7px 9px; border: 0; border-radius: var(--radius-sm);
background: transparent; color: inherit; font: inherit; font-size: 13px;
}
.pvz-pick__option:hover { background: var(--color-surface-soft); }
.pvz-pick__option--noted { display: flex; align-items: baseline; gap: 8px; }
.pvz-pick__note {
margin-left: auto; flex: 0 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 11.5px; color: var(--color-muted);
}
.pvz-pick__empty { margin: 8px 4px 4px; font-size: 12.5px; color: var(--color-muted); }
.pvz-pick__group {
padding: 8px 9px 3px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted);
}
.pvz-pick.is-invalid .pvz-pick__button { border-color: var(--color-danger); }
.pvz-pick--multi .pvz-pick__option {
display: flex; align-items: center; gap: 9px; position: relative;
}
.pvz-pick--multi .pvz-pick__option::before {
content: ""; flex: 0 0 auto; width: 17px; height: 17px;
border-radius: 5px; border: 1.5px solid var(--color-border);
background: var(--color-surface); transition: all .18s var(--ease);
}
.pvz-pick--multi .pvz-pick__option::after {
content: ""; position: absolute; left: 15px; top: 50%; margin-top: -6px;
width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0); transition: transform .18s var(--ease);
}
.pvz-pick--multi .pvz-pick__option.is-on::before {
background: var(--color-primary); border-color: var(--color-primary);
}
.pvz-pick--multi .pvz-pick__option.is-on::after { transform: rotate(45deg) scale(1); }
.pvz-pick--multi .pvz-pick__option.is-on { color: var(--color-text); font-weight: 600; }
.pvz-pick:not(.pvz-pick--multi) .pvz-pick__option.is-on {
color: var(--color-text); font-weight: 650;
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.pvz-pick__reset {
display: block; width: 100%; margin-top: 8px; padding: 7px 9px;
text-align: left; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
border: 0; border-bottom: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: transparent; color: var(--color-muted);
}
.pvz-pick__reset:hover { background: var(--color-surface-soft); color: var(--color-text); }
.pvz-pick__reset.is-on { color: var(--color-text); }
@media (max-width: 620px) {
.claim-row__reason { max-width: 200px; }
.claim-breakdown__sum { margin-left: 0; flex-basis: 100%; }
}
.fines-search { margin: 0 0 12px; }
.fines-act { display: inline; }
.table--fines td:last-child { white-space: nowrap; }
.table--fines .claim-row__reason-text { max-width: 260px; }
@media (max-width: 620px) {
.table--fines .claim-row__reason-text { max-width: 160px; }
}
.pvz-rate-cell__form {
display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.pvz-rate-cell__field { position: relative; display: inline-flex; align-items: center; }
.pvz-rate-cell__input {
width: 92px;
padding: 5px 20px 5px 8px;
font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
text-align: right;
color: var(--color-heading);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
transition: border-color .15s var(--ease), background-color .15s var(--ease);
appearance: textfield; -moz-appearance: textfield;
}
.pvz-rate-cell__input::-webkit-outer-spin-button,
.pvz-rate-cell__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pvz-rate-cell__input::placeholder { font-weight: 400; color: var(--color-faint); }
.table tbody tr:hover .pvz-rate-cell__input { border-color: var(--color-border); background: var(--color-surface); }
.pvz-rate-cell__input:focus {
border-color: var(--color-primary); background: var(--color-surface); outline: none;
}
.pvz-rate-cell__currency {
position: absolute; right: 7px;
color: var(--color-muted); font-size: 12px; pointer-events: none;
}
.pvz-rate-cell__save { order: -1; visibility: hidden; }
.pvz-rate-cell__form:focus-within .pvz-rate-cell__save,
.table tbody tr:hover .pvz-rate-cell__save { visibility: visible; }
@media (hover: none) {
.pvz-rate-cell__save { visibility: visible; }
}
.pvz-rate-cell__since,
.pvz-rate-cell__ok,
.pvz-rate-cell__warn { display: block; margin-top: 3px; font-size: 11.5px; }
.pvz-rate-cell__form--retro { flex-wrap: wrap; }
.pvz-rate-cell__form--retro .pvz-rate-cell__save { visibility: visible; }
.pvz-rate-cell__retro {
flex-basis: 100%;
display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end;
margin-top: 4px;
font-size: 11.5px; font-weight: 600; color: var(--color-warning, var(--color-muted));
text-align: right; cursor: pointer;
}
.pvz-rate-cell__ok { color: var(--color-success); }
.pvz-rate-cell__warn { color: var(--color-warning, var(--color-muted)); }
.pvz-rate-cell--saved { box-shadow: inset 0 -2px 0 var(--color-success); }
.pvz-rate-cell--error { box-shadow: inset 0 -2px 0 var(--color-danger); }
.pvz-rate-cell--retro { box-shadow: inset 0 -2px 0 var(--color-warning, var(--color-muted)); }
.pvz-rate-cell--retro .pvz-rate-cell__warn,
.pvz-employee-rate--retro .pvz-rate-cell__warn { max-width: 260px; margin-left: auto; }
.pvz-rate-count {
display: block; font-weight: 400; text-transform: none; letter-spacing: 0;
color: var(--color-muted);
}
.filters-bar__rate-date {
grid-column: span 2;
display: flex; align-items: center; gap: 8px; min-width: 0;
}
.filters-bar__rate-date > span {
flex: none; color: var(--color-muted); font-size: 13px; white-space: nowrap;
}
.filters-bar__rate-date .input { min-width: 0; flex: 1 1 auto; }
@media (max-width: 720px) {
.filters-bar__rate-date { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
.pvz-rate-cell__input { width: 84px; }
.pvz-rate-cell__form { gap: 4px; }
}
.pvz-employee-rates__date { display: flex; align-items: flex-end; gap: 8px; flex: none; }
.pvz-employee-rates__date label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pvz-employee-rates__date label > span {
flex: none; color: var(--color-muted); font-size: 13px; white-space: nowrap;
}
.pvz-employee-rates__date .input { min-width: 0; }
.pvz-employee-rates__hint { margin: 10px 0 0; font-size: 12.5px; }
.table--employee-rates td { vertical-align: top; }
.pvz-employee-rate--saved td { box-shadow: inset 0 -2px 0 var(--color-success); }
.pvz-employee-rate--error td { box-shadow: inset 0 -2px 0 var(--color-danger); }
.pvz-employee-rate--retro td {
box-shadow: inset 0 -2px 0 var(--color-warning, var(--color-muted));
}
@media (max-width: 620px) {
.pvz-employee-rates__date { width: 100%; }
.pvz-employee-rates__date label { flex: 1 1 auto; }
}
.pay-card { min-width: 0; container-type: inline-size; }
.pay-card__form {
display: grid; gap: 14px;
grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px);
align-items: start;
}
.pay-card__actions {
grid-column: 1 / -1;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pay-card__ok { color: var(--color-success); font-size: 12.5px; }
.pay-card__warn { color: var(--color-warning, var(--color-muted)); font-size: 12.5px; }
.pay-card__retro {
grid-column: 1 / -1;
display: inline-flex; align-items: center; gap: 8px;
font-size: 12.5px; font-weight: 600; color: var(--color-warning, var(--color-muted));
cursor: pointer;
}
.pay-card__subtitle {
margin: 18px 0 8px; font-size: 13px; font-weight: 800;
text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted);
}
.pay-card__note { margin-top: 14px; }
.table--pay-preview td.pay-preview__pvz {
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px;
}
.table--pay-preview tbody td.pay-preview__pvz > .cell-sub { display: inline; margin-top: 0; }
.pay-card--saved { box-shadow: inset 0 -2px 0 var(--color-success); }
.pay-card--error { box-shadow: inset 0 -2px 0 var(--color-danger); }
@container (max-width: 430px) {
.pay-card__form { grid-template-columns: minmax(0, 1fr); }
}
.manual-rate--missing td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.vstat-bar {
display: block; min-width: 64px; height: 7px; border-radius: var(--radius-pill);
background: var(--color-surface-soft); overflow: hidden;
}
.vstat-bar__fill {
display: block; width: var(--w, 0); height: 100%; border-radius: inherit;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
}
.vstat-bar__fill--coral {
background: linear-gradient(90deg, var(--color-coral), color-mix(in srgb, var(--color-coral) 60%, #fff));
}
.vstat-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.vstat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vstat-list__item {
display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px;
gap: 12px; align-items: center; font-size: 13.5px;
}
.vstat-list__label { color: var(--color-muted); min-width: 0; overflow-wrap: anywhere; }
.vstat-list__value { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.vstat-months {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: flex-end; gap: 8px; overflow-x: auto;
}
.vstat-months__item {
flex: 1 0 42px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.vstat-months__count { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vstat-months__track {
width: 100%; height: 90px; display: flex; align-items: flex-end;
background: linear-gradient(var(--color-surface-soft), var(--color-surface-soft)) no-repeat bottom / 100% 2px;
}
.vstat-months__fill {
display: block; width: 100%; min-height: 2px; height: var(--h, 0);
border-radius: 5px 5px 2px 2px;
background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
}
.vstat-months__label { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
@media (max-width: 720px) {
.vstat-list__item { grid-template-columns: minmax(0, 1fr) 64px 34px; }
.vstat-months__track { height: 64px; }
}
.upd-modal { position: fixed; inset: 0; z-index: 129; display: grid; place-items: center; padding: 28px; }
.upd-modal__backdrop {
position: absolute; inset: 0;
background: rgba(7,17,31,.5); backdrop-filter: blur(3px);
}
.upd-modal__dialog {
position: relative; display: flex; flex-direction: column;
width: min(620px, 100%); max-height: calc(86vh * var(--vu));
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-xl); overflow: hidden;
box-shadow: 0 28px 70px -26px rgba(7,17,31,.5), var(--shadow-pop);
animation: upd-modal-in .22s var(--ease) both;
}
@keyframes upd-modal-in {
from { opacity: 0; transform: translateY(10px) scale(.99); }
to { opacity: 1; transform: none; }
}
.upd-modal__head {
position: relative; z-index: 1; flex: 0 0 auto;
display: flex; align-items: center; gap: 10px;
padding: 20px 22px 14px; background: var(--color-surface);
border-bottom: 1px solid transparent;
transition: border-color .18s var(--ease);
}
.upd-modal__dialog.is-scrolled .upd-modal__head { border-bottom-color: var(--color-border); }
.upd-modal__title {
flex: 1 1 auto; min-width: 0; margin: 0;
font-size: 18px; font-weight: 700; line-height: 1.25;
letter-spacing: -.01em; color: var(--color-heading);
}
.upd-modal__count {
flex: 0 0 auto; min-width: 22px; height: 21px; padding: 0 7px;
display: inline-grid; place-items: center; border-radius: var(--radius-pill);
background: var(--color-surface-soft); color: var(--color-muted);
font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.upd-modal__close {
position: relative; flex: 0 0 auto;
display: grid; place-items: center; width: 32px; height: 32px;
margin: -4px -6px -4px 0;
border: 0; border-radius: var(--radius-md);
background: none; color: var(--color-faint); cursor: pointer;
transition: background .16s var(--ease), color .16s var(--ease);
}
.upd-modal__close svg { width: 17px; height: 17px; }
.upd-modal__close:hover { background: var(--color-surface-soft); color: var(--color-heading); }
.upd-modal__body {
position: relative; flex: 1 1 auto; overflow-y: auto;
padding: 2px 22px 22px; background: var(--color-surface);
scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent;
}
.upd-modal__body::-webkit-scrollbar { width: 10px; }
.upd-modal__body::-webkit-scrollbar-thumb {
background: var(--color-border-strong); border-radius: var(--radius-pill);
border: 3px solid var(--color-surface);
}
.upd-modal__all { flex: 1 1 auto; margin: 0; font-size: 12.5px; color: var(--color-faint); }
.upd-modal__all a { color: var(--color-primary); font-weight: 600; }
.upd-modal__foot {
position: relative; flex: 0 0 auto;
display: flex; align-items: center; justify-content: flex-end; gap: 16px;
padding: 13px 22px; border-top: 1px solid var(--color-border);
background: var(--color-surface);
}
.upd-modal__foot::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px;
background: linear-gradient(transparent, var(--color-surface));
opacity: 0; transition: opacity .2s var(--ease); pointer-events: none;
}
.upd-modal__body.has-more ~ .upd-modal__foot::before { opacity: 1; }
.upd-modal__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.upd-modal-open { overflow: hidden; }
.upd-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--color-faint); font-size: 12.5px; }
.upd-card__date { font-size: 12.5px; font-weight: 500; color: var(--color-faint); }
.upd-card__title { margin: 6px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--color-heading); }
.upd-modal .upd-card { padding: 18px 0 0; }
.upd-modal .upd-card + .upd-card { margin-top: 20px; border-top: 1px solid var(--color-border); }
.upd-card--page { padding: 22px 24px; }
.upd-card--page.is-unread { box-shadow: inset 3px 0 0 var(--color-primary); }
.upd-text { margin-top: 9px; font-size: 14.5px; line-height: 1.65; color: var(--color-text); overflow-wrap: anywhere; }
.upd-text p { margin: 0 0 10px; }
.upd-text p:last-child { margin-bottom: 0; }
.upd-text__head { margin: 16px 0 6px; font-size: 14.5px; font-weight: 700; color: var(--color-heading); }
.upd-text__list { margin: 0 0 10px; padding-left: 20px; }
.upd-text__list li { margin: 3px 0; }
.upd-text__list li::marker { color: var(--color-border-strong); }
.upd-text a { color: var(--color-primary); font-weight: 600; }
.upd-text strong { font-weight: 650; color: var(--color-heading); }
.upd-feed { display: flex; flex-direction: column; gap: 14px; }
.pc-hint { font-size: 12.5px; color: var(--color-muted); }
.pc-updates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pc-update {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding: 14px 0; border-top: 1px solid var(--color-border);
}
.pc-update:first-child { border-top: 0; }
.pc-update.is-draft { opacity: .82; }
.pc-update__main { min-width: 0; }
.pc-update__title {
display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 15px; font-weight: 750; color: var(--color-heading); text-decoration: none;
}
.pc-update__title:hover { color: var(--color-primary); }
.pc-update__excerpt { margin: 4px 0 0; font-size: 13px; color: var(--color-muted); overflow-wrap: anywhere; }
.pc-update__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--color-faint); }
.pc-update__side { flex: 0 0 auto; text-align: right; }
.pc-update__reads { display: block; font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }
.pc-update__reads-label { font-size: 11.5px; color: var(--color-muted); }
.pc-update-editor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pc-roles { display: flex; flex-direction: column; gap: 8px; }
.pc-danger-row { margin-top: 16px; }
.upd-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.upd-preset {
display: flex; flex-direction: column; gap: 2px; text-align: left;
padding: 10px 12px; border: 1px solid var(--color-border);
border-radius: var(--radius-md); background: var(--color-surface-alt);
cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.upd-preset:hover {
border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
background: var(--color-surface); transform: translateY(-1px);
}
.upd-preset__label { font-size: 13.5px; font-weight: 650; color: var(--color-heading); }
.upd-preset__hint { font-size: 12px; color: var(--color-muted); }
.upd-toolbar {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 7px 8px; border: 1px solid var(--color-border); border-bottom: 0;
border-radius: var(--radius-md) var(--radius-md) 0 0;
background: var(--color-surface-alt);
}
.upd-toolbar__btn {
padding: 5px 10px; border: 1px solid transparent; border-radius: var(--radius-sm);
background: none; color: var(--color-muted); cursor: pointer;
font-size: 12.5px; font-weight: 600; line-height: 1.3;
transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.upd-toolbar__btn b { font-weight: 800; }
.upd-toolbar__btn:hover { background: var(--color-surface); color: var(--color-heading); border-color: var(--color-border); }
.upd-toolbar__count {
margin-left: auto; padding-right: 4px;
font-size: 11.5px; color: var(--color-faint); font-variant-numeric: tabular-nums;
}
.upd-toolbar__count.is-over { color: var(--color-danger); font-weight: 700; }
.upd-toolbar + .form-control { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.upd-audience { display: flex; flex-wrap: wrap; gap: 6px; }
.upd-audience__chip { border: 0; cursor: pointer; font-family: inherit; }
.upd-audience__chip:hover { background: var(--color-surface-soft); color: var(--color-heading); }
.upd-audience__chip.is-active,
.upd-audience__chip.is-active:hover { background: var(--color-primary); color: var(--color-on-primary); }
.upd-actions {
position: sticky; bottom: 0; z-index: 2;
margin: 2px -22px -22px; padding: 14px 22px;
border-top: 1px solid var(--color-border);
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
background: var(--color-surface);
}
.pc-update-preview { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 10px; }
.pc-update-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-update-preview__live { font-size: 11.5px; color: var(--color-faint); }
.pc-update-preview__live::before {
content: ""; display: inline-block; vertical-align: middle;
width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
background: var(--color-success);
}
.upd-preview__frame {
display: flex; flex-direction: column;
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
background: var(--color-surface); box-shadow: var(--shadow-card);
overflow: hidden;
}
.upd-preview .upd-modal__head { padding: 15px 16px 11px; border-bottom-color: var(--color-border); }
.upd-preview .upd-modal__title { font-size: 15px; }
.upd-preview .upd-modal__close { cursor: default; }
.upd-preview .upd-modal__body { max-height: 46vh; padding: 2px 16px 16px; }
.upd-preview .upd-modal__foot { padding: 10px 16px; }
.upd-preview .upd-card { padding-top: 14px; }
.upd-preview .upd-card + .upd-card { margin-top: 14px; border-top: 1px solid var(--color-border); }
.upd-preview .is-empty { color: var(--color-faint); }
.upd-preview .upd-card__title.is-empty { font-weight: 600; }
.upd-preview__audience { margin: 0; }
@media (max-width: 1100px) {
.pc-update-editor { grid-template-columns: minmax(0, 1fr); }
.pc-update-preview { position: static; }
.upd-preview .upd-modal__body { max-height: none; }
}
@media (max-width: 720px) {
.upd-modal { padding: 0; place-items: end stretch; }
.upd-modal__dialog {
width: 100%; max-height: calc(92vh * var(--vu));
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; border-bottom: 0;
animation-name: upd-sheet-in;
}
.upd-modal__head { padding: 17px 16px 12px; }
.upd-modal__title { font-size: 17px; }
.upd-modal__body { padding: 2px 16px 18px; }
.upd-modal .upd-card { padding-top: 15px; }
.upd-modal .upd-card + .upd-card { margin-top: 17px; }
.upd-modal__foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 13px 16px; }
.upd-modal__all { text-align: center; }
.upd-modal__actions { display: grid; grid-template-columns: 1fr 1fr; }
.upd-modal__actions form { display: contents; }
.upd-modal__actions .btn { width: 100%; }
.upd-card--page { padding: 18px; }
.upd-card__title { font-size: 16.5px; }
.pc-update { flex-direction: column; gap: 8px; }
.pc-update__side { text-align: left; }
}
@keyframes upd-sheet-in {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.upd-modal__dialog { animation: none; }
}
.dstat {
position: relative;
display: flex; flex-direction: column; gap: 10px;
padding: 16px 18px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-card);
margin-bottom: 16px;
}
.dstat::before {
content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
background: var(--color-border-strong);
}
.dstat--danger::before { background: var(--color-danger); }
.dstat--warning::before { background: var(--color-warning); }
.dstat--success::before { background: color-mix(in srgb, var(--color-success) 55%, transparent); }
.dstat__head { display: flex; align-items: center; gap: 9px; }
.dstat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); flex: none; }
.dstat--danger .dstat__dot { background: var(--color-danger); }
.dstat--warning .dstat__dot { background: var(--color-warning); }
.dstat--success .dstat__dot { background: var(--color-success); }
.dstat__headline {
font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
color: var(--color-heading);
}
.dstat--danger .dstat__headline,
.dstat--warning .dstat__headline { color: var(--color-heading); }
.dstat__calm { font-size: 13px; color: var(--color-muted); }
.dstat__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.dstat__item { min-width: 0; }
.dstat__link {
display: inline-flex; align-items: baseline; gap: 8px;
padding: 8px 12px; min-height: 38px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-alt);
font: inherit; color: inherit; text-align: left;
transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.dstat__link:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.dstat__link:focus-visible { outline: none; box-shadow: var(--ring); }
.dstat__value { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dstat__item--danger .dstat__value { color: var(--color-danger); }
.dstat__item--warning .dstat__value { color: var(--color-warning); }
.dstat__item--info .dstat__value { color: var(--color-muted); }
.dstat__label {
font-size: 12.5px; color: var(--color-muted);
max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dsec { display: flex; flex-direction: column; gap: 12px; }
.dsec + .dsec,
.dsec + .dsec-more { margin-top: 32px; }
.dsec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dsec__intro { min-width: 0; display: grid; gap: 2px; }
.dsec__title {
font-size: 21px; font-weight: 800; letter-spacing: -0.025em;
color: var(--color-heading);
}
.dsec__question { font-size: 13px; color: var(--color-faint); }
.dsec__link {
display: inline-flex; align-items: center; gap: 6px;
color: inherit; text-decoration: none;
padding: 7px 4px; margin: -7px -4px;
}
.dsec__go {
flex: none; color: var(--color-faint);
opacity: .55; transform: translateX(-3px);
transition: opacity .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.dsec__link:hover { color: var(--color-primary); }
.dsec__link:hover .dsec__go { opacity: 1; transform: none; color: var(--color-primary); }
.dsec__link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
@media (hover: none) {
.dsec__go { opacity: .8; transform: none; }
}
.dsec__grid {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--gap-cards); align-items: start;
}
.dsec__silent {
grid-column: 1 / -1;
font-size: 13px; color: var(--color-faint);
padding: 18px 2px;
}
@media (max-width: 1000px) {
.dsec__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.dsec__grid { grid-template-columns: 1fr; gap: 12px; }
.dsec + .dsec,
.dsec + .dsec-more { margin-top: 24px; }
.dsec__title { font-size: 19px; }
.dsec__head { align-items: baseline; flex-direction: row; gap: 10px; }
.dsec__question { font-size: 12.5px; }
}
.dempty {
display: grid; justify-items: center; gap: 12px; text-align: center;
padding: 56px 24px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-2xl);
background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}
.dempty__icon {
width: 52px; height: 52px; border-radius: var(--radius-lg);
display: grid; place-items: center;
background: var(--color-surface-soft); color: var(--color-faint);
}
.dempty__icon svg { width: 26px; height: 26px; }
.dempty__title { font-size: 19px; font-weight: 800; color: var(--color-heading); }
.dempty__text { font-size: 13px; color: var(--color-muted); max-width: 46ch; }
.dsec-more {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 16px; min-height: 44px;
border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
background: none; color: var(--color-muted);
font-size: 13px; font-weight: 650;
transition: border-color .18s var(--ease), color .18s var(--ease);
}
.dsec-more:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dsec-more:focus-visible { outline: none; box-shadow: var(--ring); }
.dsec .metric-card { padding: 22px; gap: 8px; justify-content: flex-end; }
.dsec .metric-card__body { gap: 4px; }
.dsec .metric-card__label {
font-size: 13px; font-weight: 650; color: var(--color-muted);
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.dsec .metric-card__value {
--metric-value-size: 38px;
font-weight: 800; letter-spacing: -0.03em;
color: var(--color-heading); font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.dsec .metric-card__delta {
display: block; background: transparent; padding: 0; border-radius: 0;
font-size: 12px; font-weight: 500; color: var(--color-faint);
}
.dsec .metric-card__delta--warning { color: var(--color-warning); font-weight: 650; }
.dsec .metric-card__delta--coral { color: var(--color-danger); font-weight: 650; }
.dsec .metric-card__delta--success,
.dsec .metric-card__delta--primary { color: var(--color-faint); font-weight: 500; }
.dsec .dash-metric--coral .metric-card__value,
.dsec .dash-metric--critical .metric-card__value { color: var(--color-danger); }
@media (max-width: 640px) {
.dsec .metric-card { min-height: 104px; }
.dsec .metric-card__value { --metric-value-size: 33px; }
}
.dsec .card__title { font-size: 13px; font-weight: 650; color: var(--color-muted); letter-spacing: 0; }
.dsec .card__subtitle { font-size: 12px; color: var(--color-faint); margin-top: 2px; }
.dsec .card__head-side { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.dcat {
position: fixed; inset: 0 0 0 auto; z-index: 60;
width: min(440px, 100vw);
display: flex; flex-direction: column;
background: var(--color-surface);
border-left: 1px solid var(--color-border);
box-shadow: var(--shadow-pop);
}
.dcat[hidden] { display: none; }
.dcat__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 18px 20px; border-bottom: 1px solid var(--color-border);
}
.dcat__title { font-size: 17px; font-weight: 800; color: var(--color-heading); }
.dcat__sub { font-size: 12px; color: var(--color-faint); margin-top: 3px; }
.dcat__close {
flex: none; width: 34px; height: 34px; display: grid; place-items: center;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: none; color: var(--color-muted);
}
.dcat__close:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.dcat__close:focus-visible { outline: none; box-shadow: var(--ring); }
.dcat__body { flex: 1; overflow-y: auto; padding: 0 20px 20px; overscroll-behavior: contain; }
.dcat__section + .dcat__section { margin-top: 26px; }
.dcat__section-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
padding: 14px 0 8px; position: sticky; top: 0; z-index: 1;
background: var(--color-surface);
}
.dcat__section-title { font-size: 15px; font-weight: 800; color: var(--color-heading); }
.dcat__section-question { font-size: 11.5px; color: var(--color-faint); margin-top: 1px; }
.dcat__count {
flex: none; font-size: 11px; font-weight: 700; color: var(--color-muted);
font-variant-numeric: tabular-nums;
}
.dcat__count.is-off { color: var(--color-faint); }
.dcat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dcat__row {
display: flex; align-items: flex-start; gap: 11px;
padding: 10px 10px 10px 8px; margin: 0 -8px;
border-radius: var(--radius-md); cursor: pointer;
transition: background .16s var(--ease);
}
.dcat__row:hover { background: var(--color-surface-soft); }
.dcat__input { position: absolute; opacity: 0; width: 0; height: 0; }
.dcat__switch {
flex: none; margin-top: 2px;
width: 36px; height: 21px; border-radius: var(--radius-pill);
background: var(--color-border-strong);
transition: background .2s var(--ease);
display: block; position: relative;
}
.dcat__knob {
position: absolute; top: 2.5px; left: 2.5px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff; box-shadow: var(--shadow-sm);
transition: transform .26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dcat__input:checked + .dcat__switch { background: var(--color-primary); }
.dcat__input:checked + .dcat__switch .dcat__knob { transform: translateX(15px); }
.dcat__input:focus-visible + .dcat__switch { box-shadow: var(--ring); }
.dcat__text { display: grid; gap: 2px; min-width: 0; }
.dcat__name {
font-size: 13px; font-weight: 650; color: var(--color-text);
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dcat__desc { font-size: 11.5px; color: var(--color-faint); line-height: 1.4; }
.dcat__foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 20px; border-top: 1px solid var(--color-border);
}
.dcat-scrim {
position: fixed; inset: 0; z-index: 59;
background: rgba(8, 10, 16, .42); backdrop-filter: blur(2px);
}
.dcat-scrim[hidden] { display: none; }
@media (max-width: 640px) {
.dcat { inset: auto 0 0 0; width: 100%; height: min(86vh, 720px); border-left: none;
border-top: 1px solid var(--color-border);
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
}
.dblock.is-collapsing {
animation: dblock-collapse .34s var(--ease) forwards;
pointer-events: none;
}
@keyframes dblock-collapse {
0% { opacity: 1; transform: none; }
45% { opacity: 0; transform: scale(.94); }
100% { opacity: 0; transform: scale(.94); grid-column: span 0; max-height: 0;
margin: 0; padding: 0; }
}
.dsec.is-collapsing { animation: dsec-fade .42s var(--ease) forwards; overflow: hidden; }
.dsec.is-collapsing .dblock { animation: dsec-drop .2s var(--ease) forwards; }
.dsec.is-collapsing .dsec__head { animation: dsec-drop .22s var(--ease) 160ms forwards; }
@keyframes dsec-drop {
to { opacity: 0; transform: translateY(-6px); }
}
@keyframes dsec-fade {
0% { max-height: 900px; opacity: 1; }
70% { max-height: 900px; }
100% { max-height: 0; opacity: 0; margin-top: 0; }
}
.dsec.is-returned {
animation: dsec-land .58s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
@keyframes dsec-land {
from { opacity: 0; transform: translateY(22px) scale(.97); }
to { opacity: 1; transform: none; }
}
.dskel {
border-radius: var(--radius-lg);
background: linear-gradient(90deg,
var(--color-surface-soft) 0%,
color-mix(in srgb, var(--color-surface-soft) 55%, var(--color-surface)) 48%,
var(--color-surface-soft) 100%);
background-size: 240% 100%;
animation: dskel-shimmer 1.5s linear infinite;
}
@keyframes dskel-shimmer {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
.dblock__body.is-swapping > * { animation: dsec-crossfade .28s var(--ease) both; }
@keyframes dsec-crossfade {
from { opacity: .35; }
to { opacity: 1; }
}
.dsec .metric-card,
.dsec .card {
transition: transform .18s var(--ease), box-shadow .18s var(--ease),
border-color .18s var(--ease);
}
.dsec .metric-card:active,
.dsec .card:active { transform: scale(.995); }
.dcat.is-open { animation: dcat-in .3s var(--ease-out) both; }
.dcat-scrim.is-open { animation: dsec-crossfade .22s var(--ease) both; }
@keyframes dcat-in {
from { transform: translateX(28px); opacity: 0; }
to { transform: none; opacity: 1; }
}
@media (max-width: 640px) {
@keyframes dcat-in {
from { transform: translateY(32px); opacity: 0; }
to { transform: none; opacity: 1; }
}
}
@media (prefers-reduced-motion: reduce) {
.dsec.is-returned,
.dsec.is-collapsing,
.dsec.is-collapsing .dblock,
.dsec.is-collapsing .dsec__head,
.dblock.is-collapsing,
.dblock__body.is-swapping > *,
.dcat.is-open,
.dcat-scrim.is-open,
.dskel { animation: none !important; }
.dblock.is-collapsing,
.dsec.is-collapsing { display: none; }
.dcat__knob { transition: none; }
}
@media print {
[data-dash-motion] .dsec .dblock,
[data-dash-motion] .dstat { opacity: 1 !important; animation: none !important; }
}
.dstat__list[hidden],
.dcat[hidden],
.dcat-scrim[hidden] { display: none !important; }
.dstat { padding: 13px 16px; gap: 8px; }
.dstat__link { padding: 6px 11px; min-height: 34px; }
.dstat__value { font-size: 15.5px; }
.dsec .metric-card { padding: 22px; }
.dsec .metric-card__body {
display: grid; grid-template-columns: auto minmax(0, 1fr);
align-items: baseline; column-gap: 14px; row-gap: 4px;
}
.dsec .metric-card__label { grid-column: 1 / -1; }
.dsec .metric-card__value { grid-column: 1; }
.dsec .metric-card__delta { grid-column: 2; text-align: right; }
@media (max-width: 640px) {
.dsec .metric-card__body { grid-template-columns: 1fr; }
.dsec .metric-card__delta { grid-column: 1; text-align: left; }
}
.dsec .dash-gauge__ring { width: 124px; height: 124px; }
.dsec .dash-gauge__center strong { font-size: 24px; }
.dsec .dash-gauge__center--md strong { font-size: 19px; }
.dsec .dash-gauge__center--sm strong { font-size: 16px; }
.dsec .dash-donut__ring { width: 148px; height: 148px; }
.dsec .card { min-height: 96px; }
.dsec .dash-gauge__arc.tone--success { stroke: var(--color-primary); }
.dsec__grid { align-items: stretch; }
.dsec .dblock--metric { align-self: stretch; }
.dsec .dblock--tile.dblock--loose { align-self: start; }
.dsec .dash-widget:has(.dash-gauge) { padding: 14px 18px; gap: 6px; }
.dsec .dash-widget:has(.dash-gauge) .card__subtitle { font-size: 11.5px; margin-top: 0; }
.dsec .dash-widget__body:has(> .dash-gauge) { justify-content: center; flex: 1; }
.dsec .dash-gauge { justify-content: flex-start; padding: 0; }
.dsec .dash-gauge__ring { width: 76px; height: 76px; }
.dsec .dash-gauge__center { padding: 0 14px; }
.dsec .dash-gauge__center strong { font-size: 17px; }
.dsec .dash-gauge__center--md strong { font-size: 15px; }
.dsec .dash-gauge__center--sm strong,
.dsec .dash-gauge__center--xs strong { font-size: 13px; }
.dsec .dash-gauge__center span { display: none; }
.dsec .dash-gauge__bg,
.dsec .dash-gauge__arc { stroke-width: 8.5; }
.dsec .dash-donut__bg,
.dsec .dash-donut__seg { stroke-width: 10; }
.dsec .dash-donut__seg.is-active { stroke-width: 11.4; }
.dsec .dash-gauge::after {
content: attr(data-caption);
font-size: 12.5px; color: var(--color-muted);
align-self: center; margin-left: 16px; min-width: 0;
}
@media (max-width: 640px) {
.page__head { gap: 10px; }
.page__actions { gap: 6px; flex-wrap: wrap; }
.page__actions .chip { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.dstat { padding: 11px 13px; gap: 7px; margin-bottom: 12px; }
.dstat__list { gap: 6px; }
.dstat__item { width: 100%; }
.dstat__link { width: 100%; min-height: 36px; padding: 7px 11px; }
.dstat__value { font-size: 15px; }
.dstat__label { font-size: 12.5px; }
}
@media (max-width: 640px) {
.page__actions .lswitch { display: none; }
.page__actions:has(> .chip) { flex-wrap: nowrap; }
.page__actions .chip { font-size: 11.5px; padding: 6px 9px; min-height: 32px; }
.page__actions .chip b { font-weight: 700; }
.dash-period b { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dstat__link { min-height: 34px; padding: 6px 10px; }
}
@media (max-width: 640px) {
.dstat { padding: 10px 12px; gap: 6px; }
}
@media (max-width: 640px) {
.page--dash .page__subtitle { display: none; }
}
.dsetup:empty { display: none; }
.dsetup { margin-top: 32px; }
@media (max-width: 640px) { .dsetup { margin-top: 24px; } }
.dsec .dash-list__label { font-size: 13px; font-weight: 650; color: var(--color-text); }
.dsec .dash-list__sub { font-size: 12px; font-weight: 400; color: var(--color-faint); }
.dsec .dash-list__value { font-size: 14px; font-weight: 800; }
.dsec .dash-list__value--info { color: var(--color-muted); }
.dsec .dash-list__value--success { color: var(--color-muted); }
.dsec .card__head .btn { font-size: 12.5px; font-weight: 650; }
@media (max-width: 640px) {
.dsec .card__head .btn { min-height: 32px; }
}
.dsec--skeleton { pointer-events: none; }
.dskel--title { display: block; width: 180px; height: 26px; }
.dskel--card { grid-column: span 6; height: 96px; display: block; }
@media (max-width: 1000px) { .dskel--card { grid-column: span 3; } }
@media (max-width: 640px) { .dskel--card { grid-column: 1 / -1; height: 86px; } }
.dsec .metric-card__icon { display: none; }
@media (min-width: 1280px) {
.dcanvas {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
gap: 32px 28px;
}
.dsec + .dsec,
.dsec + .dsec-more { margin-top: 0; }
.dsetup, .dempty { grid-column: 1 / -1; margin-top: 0; }
.dsec__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dsec .dblock { grid-column: span var(--span, 3); }
.dsec:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@container (max-width: 360px) {
.dsec .metric-card__body { grid-template-columns: minmax(0, 1fr); }
.dsec .metric-card__value,
.dsec .metric-card__delta { grid-column: 1; text-align: left; }
}
.dsec .dash-list:not(.is-open) > .dash-list__item:nth-child(n + 4) { display: none; }
.dsec .dash-list__more {
align-self: flex-start;
margin-top: 2px; padding: 6px 2px; min-height: 30px;
background: none; border: none;
font: inherit; font-size: 12.5px; font-weight: 650; color: var(--color-primary);
}
.dsec .dash-list__more:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.dsec .dash-donut {
display: flex;
gap: 14px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.dsec .dash-donut__ring { width: 132px; height: 132px; }
.dsec .dash-donut__center { padding: 0 26px; }
.dsec .dash-donut__center strong { font-size: 19px; }
.dsec .dash-donut__center--md strong { font-size: 16px; }
.dsec .dash-donut__center--sm strong,
.dsec .dash-donut__center--xs strong { font-size: 13px; }
.dsec .dash-donut .chart-legend {
gap: 2px;
min-height: 66px;
align-content: center;
flex: 0 1 auto; min-width: 150px; max-width: 320px;
}
.dsec [data-donut-legend] .chart-legend__track {
flex: 1 1 auto;
min-width: 0;
height: 6px;
margin: 0 4px;
border-radius: var(--radius-pill);
background: var(--chart-track);
overflow: hidden;
}
.dsec [data-donut-legend] .chart-legend__fill {
display: block;
width: var(--pct, 0%);
height: 100%;
border-radius: inherit;
background: var(--seg, var(--color-primary));
transition: width .5s var(--ease);
}
.dsec [data-donut-legend] li:has(.tone--primary) .chart-legend__fill { background: var(--color-primary); }
.dsec [data-donut-legend] li:has(.tone--success) .chart-legend__fill { background: var(--color-success); }
.dsec [data-donut-legend] li:has(.tone--warning) .chart-legend__fill { background: var(--chart-amber, var(--color-warning)); }
.dsec [data-donut-legend] li:has(.tone--danger) .chart-legend__fill { background: var(--color-danger); }
.dsec [data-donut-legend] li:has(.tone--coral) .chart-legend__fill { background: var(--color-coral); }
.dsec [data-donut-legend] li:has(.tone--beige) .chart-legend__fill { background: var(--chart-sand, var(--color-beige)); }
.dsec [data-donut-legend] li:has(.tone--violet) .chart-legend__fill { background: var(--color-violet); }
.dsec [data-donut-legend] li:has(.tone--muted) .chart-legend__fill { background: var(--color-faint); }
.dsec .dash-donut .chart-legend li { font-size: 12px; padding: 2px 7px; }
.dsec [data-donut-legend] .chart-legend__val {
margin-left: auto; flex-basis: auto; text-align: right;
}
.dsec [data-donut-legend] li { flex-wrap: nowrap; }
.dsec [data-donut-legend] li > span:not(.chart-legend__dot):not(.chart-legend__val):not(.chart-legend__track),
.dsec [data-donut-legend] li > a {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsec .dash-widget:has(.dash-donut) { container-type: inline-size; container-name: donutcard; }
@container donutcard (min-width: 440px) {
.dsec .dash-donut {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
justify-content: stretch;
}
.dsec .dash-donut .chart-legend { min-width: 0; max-width: none; }
.dsec [data-donut-legend] .chart-legend__track { display: block; }
.dsec [data-donut-legend] li > span:not(.chart-legend__dot):not(.chart-legend__val):not(.chart-legend__track),
.dsec [data-donut-legend] li > a { flex: 0 1 auto; max-width: 46%; }
}
@container donutcard (min-width: 560px) {
.dsec .dash-donut { gap: 28px; }
.dsec .dash-donut__ring { width: 172px; height: 172px; }
.dsec .dash-donut__center { padding: 0 34px; }
.dsec .dash-donut__center strong { font-size: 24px; }
.dsec .dash-donut__center--md strong { font-size: 20px; }
.dsec .dash-donut .chart-legend li { font-size: 13px; }
}
@container donutcard (min-width: 900px) {
.dsec .dash-donut { gap: 36px; }
.dsec .dash-donut__ring { width: 208px; height: 208px; }
.dsec .dash-donut__center { padding: 0 42px; }
.dsec .dash-donut__center strong { font-size: 28px; }
.dsec .dash-donut__center--md strong { font-size: 23px; }
.dsec .dash-donut__center--sm strong { font-size: 18px; }
.dsec .dash-donut__center--xs strong { font-size: 15px; }
.dsec .dash-donut .chart-legend { gap: 6px; }
.dsec .dash-donut .chart-legend li { font-size: 13.5px; padding: 4px 8px; }
.dsec [data-donut-legend] .chart-legend__track { height: 8px; margin: 0 10px; }
}
.dsec .dash-widget:has(.dash-donut) .dash-widget__body { justify-content: center; flex: 1; }
.dsec .dash-widget:has(.dash-donut):not(:has(.card__subtitle)) .card__head {
margin-bottom: calc(1.45em + 12px);
}
.dsec__grid + .dsec__grid { margin-top: 14px; }
.dsec__grid:empty { display: none; }
@media (max-width: 640px) { .dsec__grid + .dsec__grid { margin-top: 12px; } }
.dsec .dblock--tile .dash-widget { padding: 12px 16px; gap: 2px; min-height: 0; }
.dsec .dblock--tile .card__title { font-size: 13px; font-weight: 650; }
.dsec .dblock--tile .card__subtitle { font-size: 12px; margin-top: 0; }
.dsec .dblock--tile .dash-gauge__center strong { font-size: 20px; }
.dsec .dblock--tile .dash-gauge::after { font-size: 12px; margin-left: 12px; }
.dsec .dblock--tile .dash-widget__body { flex: none; }
.dsec .dblock--tile .dash-gauge__ring { width: 80px; height: 80px; }
.dcat__foot { flex-direction: column; align-items: stretch; gap: 8px; }
.dcat__advanced {
display: flex; align-items: center; gap: 11px;
padding: 11px 13px; border-radius: var(--radius-md);
border: 1px solid var(--color-border); background: var(--color-surface-alt);
color: var(--color-text);
transition: border-color .18s var(--ease), background .18s var(--ease);
}
.dcat__advanced:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.dcat__advanced:focus-visible { outline: none; box-shadow: var(--ring); }
.dcat__advanced > svg:first-child { flex: none; color: var(--color-primary); }
.dcat__advanced-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.dcat__advanced-text b { font-size: 13px; font-weight: 700; }
.dcat__advanced-text span { font-size: 11.5px; color: var(--color-faint); }
.dcat__advanced-go { flex: none; color: var(--color-faint); }
.dcat__reset { align-self: flex-start; }
body:has(.dcat:not([hidden])) .fb-fab { display: none; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-aura {
from { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
to { transform: translate3d(-5%, 6%, 0) scale(1.14); opacity: 1; }
}
@keyframes hero-aura-still { from { opacity: .5; } to { opacity: .95; } }
@keyframes hero-sheen {
0% { transform: translateX(-140%) skewX(-14deg); }
42%, 100% { transform: translateX(560%) skewX(-14deg); }
}
@keyframes hero-step-glow {
0%, 58%, 100% {
background: var(--color-primary-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
16%, 30% {
background: color-mix(in srgb, var(--color-primary) 20%, var(--color-primary-soft));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 42%, transparent),
0 0 0 5px color-mix(in srgb, var(--color-primary) 13%, transparent);
}
}
.hero-live { animation: hero-rise .55s var(--ease-out) backwards; }
.hero-live::before { animation: hero-aura 19s ease-in-out infinite alternate; }
.kpi-cab-hero.hero-live::before,
.ins-hero.hero-live::before { animation-name: hero-aura-still; }
.eco-hero.hero-live .eco-hero__glow { animation: hero-aura 19s ease-in-out infinite alternate; }
.eco-hero.hero-live { animation-name: none; }
.qhero.hero-live,
.bundle-hero.hero-live,
.claim-hero.hero-live,
.payroll-detail-hero.hero-live { position: relative; overflow: hidden; isolation: isolate; }
.qhero.hero-live::after,
.bundle-hero.hero-live::after,
.claim-hero.hero-live::after,
.payroll-detail-hero.hero-live::after {
content: ""; position: absolute; z-index: -1; pointer-events: none;
right: -180px; top: -230px; width: 460px; height: 460px; border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--hero-tone) var(--hero-tone-mix), transparent), transparent 68%);
animation: hero-aura 19s ease-in-out infinite alternate;
}
.hero-live { --hero-tone: var(--color-primary); --hero-tone-mix: 15%; }
.payroll-detail-hero.hero-live { --hero-tone: var(--color-success); }
.bundle-hero.hero-live { --hero-tone-mix: 26%; }
html[data-theme="dark"] .hero-live { --hero-tone-mix: 26%; }
.hero-live .btn-primary { position: relative; overflow: hidden; }
.hero-live .btn-primary::after {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
animation: hero-sheen 8s var(--ease) 1.4s infinite;
pointer-events: none;
}
.formula-hero.hero-live .formula-hero__step-num { animation: hero-step-glow 5.4s var(--ease) infinite; }
.formula-hero.hero-live .formula-hero__step:nth-child(2) .formula-hero__step-num { animation-delay: .55s; }
.formula-hero.hero-live .formula-hero__step:nth-child(3) .formula-hero__step-num { animation-delay: 1.1s; }
.formula-hero.hero-live .formula-hero__step:nth-child(4) .formula-hero__step-num { animation-delay: 1.65s; }
@media (max-width: 640px) {
.mail-cta { padding: 12px 14px; gap: 8px 12px; margin-bottom: 12px; }
.mail-cta__icon { width: 30px; height: 30px; border-radius: 9px; margin-top: 0; }
.mail-cta__icon svg { width: 17px; height: 17px; }
.mail-cta__eyebrow { display: none; }
.mail-cta__title { font-size: 14px; line-height: 1.3; margin-top: 0; }
.mail-cta__text {
font-size: 12px; margin-top: 4px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.mail-cta__form { flex-wrap: nowrap; gap: 6px; }
.mail-cta__input { flex: 1 1 auto; min-width: 0; height: 40px; font-size: 13px; }
.mail-cta__btn { min-height: 40px; padding-inline: 14px; }
.repcal { padding: 12px 13px; margin-bottom: 12px; }
.repcal__head { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 9px; }
.repcal__title { font-size: 14px; }
.repcal__summary { font-size: 12px; }
.repcal__slots { gap: 6px; }
.repslot { padding: 8px 10px; gap: 10px; align-items: center; }
.repslot__leaf { width: 38px; }
.repslot__month { font-size: 8.5px; }
.repslot__day { font-size: 19px; }
.repslot__title { font-size: 13px; }
.repslot__sub { display: none; }
.repslot__fact { font-size: 11.5px; }
.repslot__side { gap: 4px; }
.repslot__when { font-size: 10.5px; padding: 2px 6px; }
.repslot__action { min-height: 30px; padding-inline: 11px; font-size: 12px; }
}
@media (max-width: 640px) {
.repcal--due .repcal__summary { display: none; }
.repcal--due .repcal__head { margin-bottom: 6px; }
.dstat { padding: 11px 12px; gap: 7px; }
.dstat__list { gap: 5px; }
.dstat__link { min-height: 34px; padding: 5px 10px; }
.dstat__value { font-size: 15px; }
.dstat__label { font-size: 12.5px; max-width: none; }
}
.dsec .metric-card,
.dsec .dblock--tile .dash-widget { min-height: 144px; }
.dsec .metric-card__delta,
.dsec .dblock--tile .card__subtitle {
height: 2.5em; line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.dsec .dblock--tile .dash-widget:has(.dash-gauge) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "ring head" "ring sub";
align-items: center;
column-gap: 14px; row-gap: 2px;
}
.dsec .dblock--tile .dash-widget:has(.dash-gauge) .card__head { grid-area: head; align-self: end; }
.dsec .dblock--tile .dash-widget:has(.dash-gauge) .card__subtitle { grid-area: sub; align-self: start; }
.dsec .dblock--tile .dash-widget:has(.dash-gauge) .dash-widget__body { grid-area: ring; }
.dsec .dblock--tile .dash-gauge::after { display: none; }
@media (max-width: 640px) {
.dsec .metric-card,
.dsec .dblock--tile .dash-widget { min-height: 104px; }
}
.dsec .stagger-item { animation: none; opacity: 1; }
.rent-month { display: flex; align-items: center; gap: 8px; }
.rent-month__label { font-size: 13px; color: var(--color-muted); white-space: nowrap; }
.rent-month .input { width: auto; min-width: 132px; max-width: 220px; }
.money-board { display: flex; flex-direction: column; gap: 22px; }
.money-board > .rating-stale,
.money-board > .bulk-bar { margin-bottom: 0; }
@media (max-width: 819px) {
.money-board { gap: 14px; }
}
@media (min-width: 820px) {
.money-board > .card { padding: 22px; }
.money-board > .rating-stale { padding: 14px 18px; }
.money-board .table tbody td { padding: 14px; }
}
.metric-grid--money { grid-template-columns: repeat(auto-fit, minmax(222px, 1fr)); }
@media (min-width: 820px) {
.metric-grid--money .metric-card { padding: 17px 18px; }
.metric-grid--money .metric-card__value { --metric-value-size: 33px; }
}
.metric-meter {
display: block; height: 5px; margin-top: -3px;
border-radius: var(--radius-pill);
background: var(--color-surface-soft);
overflow: hidden;
}
.metric-meter__fill {
display: block; height: 100%; border-radius: inherit;
background: linear-gradient(90deg, var(--color-success),
color-mix(in srgb, var(--color-success) 58%, #FFFFFF));
}
.rent-table td { vertical-align: top; }
.rent-table__actions { white-space: nowrap; }
.pick-col { width: 38px; }
.pick-col input[type="checkbox"] { display: block; margin: 2px 0 0; }
.rent-col-point { width: 34%; }
.rent-col-money { width: 13%; }
.rent-col-due { width: 16%; }
.rent-col-state { width: 14%; }
.rent-col-act { width: 21%; }
.rent-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rent-row--overdue td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.rent-row--due td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
.rent-row--paid { opacity: 0.72; }
.rent-due__pick {
display: inline-flex; align-items: center; gap: 6px;
margin: -3px -7px; padding: 3px 7px;
border: 1px solid transparent; border-radius: var(--radius-sm);
color: inherit; text-decoration: none; font: inherit; cursor: pointer;
transition: background-color .15s var(--ease), border-color .15s var(--ease),
color .15s var(--ease);
}
.rent-due__icon { width: 14px; height: 14px; flex: none; color: var(--color-faint); }
.rent-due__label { font-variant-numeric: tabular-nums; }
.rent-due__pick:hover { background: var(--color-surface-soft); border-color: var(--color-border-strong); }
.rent-due__pick:hover .rent-due__icon { color: var(--color-primary); }
.rent-due__pick:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-soft); }
.rent-due__pick[aria-expanded="true"] {
background: var(--color-primary-soft); border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.rent-due__pick[aria-expanded="true"] .rent-due__icon { color: var(--color-primary); }
.rent-amount__edit {
display: inline-flex; align-items: center; gap: 6px;
margin: -3px -7px; padding: 3px 7px;
border: 1px solid transparent; border-radius: var(--radius-sm);
color: inherit; text-decoration: none;
transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.rent-amount__icon { width: 13px; height: 13px; flex: none; color: var(--color-faint); }
.rent-amount__edit:hover { background: var(--color-surface-soft); border-color: var(--color-border-strong); }
.rent-amount__edit:hover .rent-amount__icon { color: var(--color-primary); }
.rent-amount__edit:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--ring-soft); }
.rentcal { transform-origin: top left; }
.rentcal__main { width: 288px; }
.rentcal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rentcal__code { font-size: 14px; font-weight: 800; color: var(--color-heading); letter-spacing: -0.01em; }
.rentcal__month { font-size: 12.5px; font-weight: 600; color: var(--color-muted); }
.rentcal .periodcal__day.is-blank { visibility: hidden; }
.rentcal__day {
border-color: var(--color-border); background: var(--color-surface);
cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
color: var(--color-text); font-variant-numeric: tabular-nums;
transition: background-color .12s var(--ease), border-color .12s var(--ease),
color .12s var(--ease);
}
.rentcal__day:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); }
.rentcal__day:focus-visible { outline: none; box-shadow: var(--ring); }
.rentcal .periodcal__day.is-today {
background: var(--color-surface); border-color: var(--color-primary);
color: var(--color-primary-dark); font-weight: 800;
}
.rentcal .periodcal__day.is-picked {
background: var(--color-primary); border-color: var(--color-primary);
color: var(--color-on-primary); font-weight: 800;
}
.rentcal .periodcal__day.is-picked:hover { background: var(--color-primary-strong); color: var(--color-on-primary); }
.rentcal__tail {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border);
}
.rentcal__tail-label {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--color-faint);
}
.rentcal__chip {
min-width: 30px; height: 26px; padding: 0 8px;
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface); color: var(--color-muted);
font: inherit; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
cursor: pointer;
}
.rentcal__chip:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); }
.rentcal__chip.is-picked { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.rentcal__hint { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--color-muted); }
.rent-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rent-pay__more > summary {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--color-faint); cursor: pointer;
list-style: none; user-select: none;
transition: background-color .14s var(--ease), color .14s var(--ease),
border-color .14s var(--ease);
}
.rent-pay__more > summary svg { width: 16px; height: 16px; }
.rent-pay__more > summary::-webkit-details-marker { display: none; }
.rent-pay__more > summary:hover {
background: var(--color-surface-soft); border-color: var(--color-border-strong);
color: var(--color-primary);
}
.rent-pay__more > summary:focus-visible { outline: none; box-shadow: var(--ring); color: var(--color-primary); }
.rent-pay__more[open] > summary {
background: var(--color-primary-soft); border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.rent-pay__more[open] { flex: 1 0 100%; }
.rent-pay__fields { display: grid; gap: 6px; }
.rent-pay__amount, .rent-pay__date { width: 100%; }
.rent-pay__fields { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rent-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rent-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.rent-card__amount { display: flex; flex-direction: column; gap: 2px; }
.rent-card__value { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; }
.rent-card__caption { font-size: 13px; color: var(--color-muted); }
.rent-card__note { margin: 0; font-size: 13px; color: var(--color-muted); }
.rent-card__empty {
margin: 0;
padding: 12px 14px;
border-radius: var(--radius-md);
background: var(--color-warning-soft);
color: var(--color-warning);
font-size: 13px;
}
.rent-history { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.rent-history__row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: var(--radius-sm);
background: var(--color-surface-alt);
font-size: 13px;
}
.rent-history__month { color: var(--color-muted); }
.rent-history__state { font-size: 12px; color: var(--color-muted); }
.rent-history__amount { font-variant-numeric: tabular-nums; }
.rent-history__row--paid .rent-history__state { color: var(--color-success); }
.rent-history__row--missed .rent-history__state { color: var(--color-danger); }
@media (max-width: 640px) {
.rent-pay { width: 100%; }
}
.util-filters { flex-wrap: wrap; row-gap: 8px; column-gap: 12px; }
.card.util-new { display: block; padding: 0; }
.util-new__summary {
display: flex; align-items: center; gap: 12px;
padding: 18px 20px; border-radius: var(--radius-xl);
cursor: pointer; list-style: none; user-select: none;
transition: background-color .14s var(--ease);
}
.util-new__summary::-webkit-details-marker { display: none; }
.util-new__summary:hover { background: var(--color-surface-soft); }
.util-new__summary:focus-visible { outline: none; box-shadow: var(--ring); }
.util-new__plus {
width: 32px; height: 32px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
background: var(--color-primary-soft); color: var(--color-primary-dark);
transition: transform .2s var(--ease);
}
.util-new__plus svg { width: 17px; height: 17px; }
.util-new[open] .util-new__plus { transform: rotate(45deg); }
.util-new__title { font-size: 15.5px; font-weight: 700; color: var(--color-heading); letter-spacing: -0.01em; }
.util-new__hint { display: block; margin-top: 2px; font-size: 13px; color: var(--color-muted); }
.util-form { padding: 0 20px 20px; }
@media (prefers-reduced-motion: reduce) {
.util-new__plus { transition: none; }
}
.util-form__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px 14px;
}
@media (min-width: 1100px) {
.util-form__grid { grid-template-columns: 1.5fr 1fr 1.6fr .8fr 1fr 1fr; }
}
.util-form__comment { grid-column: 1 / -1; }
.util-form__actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.util-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.util-actions > form { flex: none; }
.util-remove__btn {
width: 30px; height: 30px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; border-radius: var(--radius-sm);
background: transparent; color: var(--color-faint); cursor: pointer;
transition: background-color .14s var(--ease), color .14s var(--ease),
border-color .14s var(--ease);
}
.util-remove__btn svg { width: 15px; height: 15px; }
.util-remove__btn:hover {
background: var(--color-danger-soft); border-color: var(--color-danger);
color: var(--color-danger);
}
.util-remove__btn:focus-visible { outline: none; box-shadow: var(--ring); color: var(--color-danger); }
.util-points td { vertical-align: top; }
.util-points th:first-child { width: 30%; }
.util-kind { display: flex; align-items: center; gap: 10px; }
.util-kind__text { display: grid; gap: 2px; min-width: 0; }
.util-kind__text .cell-sub { display: block; }
.util-kind__icon {
width: 28px; height: 28px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
background: var(--color-surface-soft); color: var(--color-muted);
}
.util-kind__icon svg { width: 15px; height: 15px; }
.util-kind__icon--warm { background: var(--color-warning-soft); color: var(--color-warning); }
.util-kind__icon--cool { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.util-kind__icon--fresh { background: var(--color-success-soft); color: var(--color-success); }
.util-col-point { width: 17%; }
.util-col-bill { width: 27%; }
.util-col-money { width: 10%; }
.util-col-due { width: 12%; }
.util-col-state { width: 13%; }
.util-col-act { width: 21%; }
.util-repeat { display: flex; flex: none; }
.util-repeat .btn { gap: 7px; }
.util-repeat svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 640px) {
.util-form__grid { grid-template-columns: 1fr; }
.util-new__summary { padding: 14px 16px; }
.util-form { padding: 0 16px 16px; }
.util-actions { flex-wrap: wrap; }
}
.qadd__dialog:has(.rguide) { width: min(900px, 100%); }
.rguide { position: relative; margin-top: 4px; }
.rguide.is-empty { display: none; }
.rguide__card {
position: relative; overflow: hidden;
padding: 16px 18px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background:
linear-gradient(180deg, color-mix(in srgb, var(--color-primary-soft) 55%, transparent), transparent 46%),
var(--color-surface);
transform-origin: 50% 0;
}
.rguide__card.is-entering { animation: rguide-in .42s var(--ease, cubic-bezier(.2,.7,.2,1)) both; }
.rguide.is-resizing { overflow: hidden; transition: height .28s var(--ease, cubic-bezier(.2,.7,.2,1)); }
@keyframes rguide-in {
from { opacity: 0; transform: translateY(14px) scale(.985); }
60% { opacity: 1; }
to { opacity: 1; transform: none; }
}
.rguide__glow {
position: absolute; inset: -40% auto auto -20%; width: 60%; aspect-ratio: 1;
border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%);
filter: blur(18px); opacity: .55;
animation: rguide-breathe 7s ease-in-out infinite;
}
@keyframes rguide-breathe {
0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .45; }
50% { transform: translate3d(6%, 4%, 0) scale(1.08); opacity: .7; }
}
.rguide__head { position: relative; display: grid; gap: 4px; }
.rguide__head .role-badge { justify-self: start; }
.rguide__title { margin: 4px 0 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.rguide__who { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-muted); }
.rguide__scope {
display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px;
padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
background: var(--color-surface-alt); color: var(--color-text);
}
.rguide__scope i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.rguide__body {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: 16px 20px; margin-top: 14px; align-items: start;
}
.rguide__facts { display: grid; gap: 10px; }
.rguide__list-title { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.rguide__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rguide__list li {
padding: 4px 9px; border-radius: 999px; font-size: 12.5px; line-height: 1.3;
background: var(--color-success-soft); color: var(--color-success);
}
.rguide__list--hidden li { background: var(--color-surface-alt); color: var(--color-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-muted) 55%, transparent); }
.rguide__chat { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.rguide__chat b { color: var(--color-text); }
.rguide__money { margin: 0; display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; }
.rguide__money::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rguide__money--yes { background: var(--color-warning-soft); color: var(--color-warning); }
.rguide__money--no { background: var(--color-success-soft); color: var(--color-success); }
.rguide__shots { display: grid; gap: 8px; }
.rguide__stage {
position: relative; aspect-ratio: 16 / 10; overflow: hidden; cursor: pointer;
border-radius: 10px; border: 1px solid var(--color-border);
background: var(--color-surface-alt); box-shadow: var(--shadow-soft);
}
.rguide__shots--phone .rguide__stage { aspect-ratio: 9 / 12; width: min(100%, 240px); justify-self: center; }
.rguide__shot {
position: absolute; inset: 0; margin: 0; opacity: 0;
transition: opacity .55s ease;
}
.rguide__shot.is-shown { opacity: 1; z-index: 1; }
.rguide__stage::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--color-surface) 65%, transparent) 50%, transparent 80%);
background-size: 220% 100%;
animation: rguide-shimmer 1.4s linear infinite;
}
@keyframes rguide-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.rguide__img {
display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
transform: scale(1); opacity: 0; transition: opacity .35s ease;
}
.rguide__img.is-loaded { opacity: 1; }
.rguide__shot.is-shown .rguide__img.is-loaded { animation: rguide-kenburns 6s ease-out both; }
@keyframes rguide-kenburns { from { transform: scale(1); } to { transform: scale(1.035); } }
.rguide__img--dark { display: none; }
[data-theme="dark"] .rguide__img--light { display: none; }
[data-theme="dark"] .rguide__img--dark { display: block; }
.rguide__caption { font-size: 12px; line-height: 1.4; color: var(--color-muted); min-height: 1.4em; text-align: center; }
.rguide__dots { display: flex; justify-content: center; gap: 6px; }
.rguide__dot {
width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
background: var(--color-border); transition: width .25s var(--ease, ease), background .25s;
}
.rguide__dot.is-active { width: 22px; background: var(--color-primary); }
.rguide__dot:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 640px) {
.rguide__body { grid-template-columns: 1fr; }
.rguide__card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.rguide__card.is-entering, .rguide__glow, .rguide__shot.is-shown .rguide__img,
.rguide__stage::before { animation: none; }
.rguide__shot, .rguide__img, .rguide.is-resizing { transition: none; }
}
.eco-flow__seg--violet { background: var(--color-violet); }
.eco-kpi--violet::after { background: var(--color-violet); }
.eco-kpi--violet .eco-bar { background: var(--color-violet); }
.eco-kpi--muted::after { background: var(--color-border-strong); }
.eco-flow__note { margin: 6px 0 0; font-size: 12px; color: var(--color-faint); }
.rent-grid {
display: grid;
grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.rent-grid__fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
min-width: 0;
}
.rent-grid__note { grid-column: 1 / -1; }
.rent-grid__owned {
margin: 0;
align-self: center;
padding: 12px 14px;
border-radius: var(--radius-md);
background: var(--color-surface-alt);
color: var(--color-muted);
font-size: 13px;
line-height: 1.45;
}
.rent-grid [hidden] { display: none; }
@media (max-width: 819px) {
.rent-grid { grid-template-columns: 1fr; }
}
.form-columns { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1200px) {
.form-shell:has(> .form-columns),
.pvz-form:has(> .form-columns) { max-width: none; }
.form-columns {
display: block;
columns: 2;
column-gap: 18px;
}
.form-columns > .card {
break-inside: avoid;
margin-bottom: 18px;
}
.form-columns > .card--wide { column-span: all; }
}
a.repslot__leaf { text-decoration: none; cursor: pointer; }
a.repslot__leaf:hover { border-color: var(--color-border-strong); }
a.repslot__leaf:focus-visible,
a.repslot__title:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
a.repslot__title { text-decoration: none; color: var(--color-heading); justify-self: start; }
a.repslot__title:hover { color: var(--color-primary); }
.emp-form .form-grid--work { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (min-width: 1200px) {
.emp-form .scope-pick__grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
.actions-menu__toggle { gap: 7px; }
.actions-menu__caret { transition: transform .18s var(--ease); }
.dropdown.is-open .actions-menu__caret { transform: rotate(180deg); }
.dropdown-menu.actions-menu {
right: 0;
width: min(268px, calc(calc(100vw * var(--vu)) - 32px));
}
.actions-menu a { white-space: nowrap; }
.actions-menu .badge { margin-left: auto; }
.actions-menu__sep { height: 1px; margin: 5px 4px; background: var(--color-border); }
.actions-menu .actions-menu__item--danger { color: var(--color-danger); }
.actions-menu .actions-menu__item--danger:hover {
color: var(--color-danger);
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}
.metric-grid--supplies { grid-template-columns: repeat(auto-fit, minmax(162px, 1fr)); }
.filters-bar--supplies { grid-template-columns: repeat(3, minmax(160px, 1fr)) auto; }
.table--supplies .col-act { width: 224px; white-space: nowrap; }
.table--supplies td.col-act .row-actions { display: flex; justify-content: flex-start; gap: 6px; }
.table--supplies td.col-act .inline-form { display: flex; gap: 6px; }
.table tbody tr[data-row-href] .row-actions--verdict .btn-secondary {
background: var(--color-surface); border-color: var(--color-border);
color: var(--color-text); font-weight: 600;
}
.table tbody tr[data-row-href]:hover .row-actions--verdict .btn-secondary {
background: var(--color-surface-soft); border-color: var(--color-border-strong);
}
.table .row-actions--verdict .btn-danger { box-shadow: none; }
.table .row-actions--verdict .btn-danger:hover { transform: none; filter: brightness(1.08); }
@media (max-width: 900px) {
.filters-bar--supplies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.metric-grid--supplies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pay-calc [hidden] { display: none !important; }
.pay-calc-layout {
display: grid; gap: 18px; align-items: start;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1120px) {
.pay-calc-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .72fr); }
}
.pay-calc { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pay-step .card__head { align-items: center; gap: 12px; flex-wrap: wrap; }
.pay-step .card__title { display: inline-flex; align-items: center; }
.pay-step__num {
display: inline-flex; align-items: center; justify-content: center;
width: 23px; height: 23px; margin-right: 9px; border-radius: 50%;
background: var(--color-primary-soft); color: var(--color-primary-dark);
font-size: 12.5px; font-weight: 800; flex: none;
}
.pay-presets { margin-top: 12px; }
.chip--action {
border: 1px solid var(--color-border); background: var(--color-surface);
cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
}
.chip--action:hover {
border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
color: var(--color-primary-dark); background: var(--color-surface-alt);
}
.chip--action:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pay-resolved {
margin: 14px 0 0; padding: 10px 13px; border-radius: var(--radius-md);
background: var(--color-surface-soft); color: var(--color-muted);
font-size: 13px; font-weight: 600; line-height: 1.45;
}
.pay-resolved b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.pay-resolved.is-bad {
background: var(--color-danger-soft); color: var(--color-danger);
}
.pay-resolved.is-bad b { color: inherit; }
.pay-scope { margin: 14px 0 0; font-size: 13px; color: var(--color-muted); line-height: 1.5; }
.pay-scope b { color: var(--color-text); font-weight: 700; }
.pay-option { display: flex; flex-direction: column; gap: 5px; }
.pay-option + .pay-option { margin-top: 14px; }
.pay-option .field__hint { margin-left: 26px; }
.pay-actions__hint { color: var(--color-muted); font-size: 12.5px; margin-left: auto; }
.pay-calc.is-submitting .pay-actions .btn { pointer-events: none; }
.pay-calc.is-submitting .pay-actions .btn:not(.is-loading) { opacity: .55; }
.pay-estimate-slot { display: block; transition: opacity .15s var(--ease); }
.pay-estimate-slot.htmx-request { opacity: .45; pointer-events: none; }
.pay-estimate-wait { display: none; }
.pay-estimate-slot.htmx-request + .pay-estimate-wait {
display: flex; align-items: center; gap: 12px;
color: var(--color-muted); font-size: 13.5px;
}
.pay-estimate { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
.pay-estimate__hero {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
padding: 14px 16px; border-radius: var(--radius-lg);
background: var(--color-primary-soft);
}
.pay-estimate__label { width: 100%; font-size: 12.5px; font-weight: 700; color: var(--color-muted); }
.pay-estimate__sum {
font-size: 31px; font-weight: 800; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pay-estimate__meta { color: var(--color-muted); font-size: 13px; font-weight: 600; }
.pay-sum { list-style: none; margin: 16px 0 0; padding: 0; }
.pay-sum li {
display: grid; grid-template-columns: 16px minmax(0, 1fr) auto;
align-items: baseline; gap: 10px; padding: 9px 2px; font-size: 14px;
border-bottom: 1px dashed var(--color-border);
}
.pay-sum li:last-child { border-bottom: 0; }
.pay-sum__op { color: var(--color-muted); font-weight: 800; text-align: center; }
.pay-sum__val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.pay-sum .is-plus .pay-sum__op, .pay-sum .is-plus .pay-sum__val { color: var(--color-success); }
.pay-sum .is-minus .pay-sum__op, .pay-sum .is-minus .pay-sum__val { color: var(--color-danger); }
.pay-sum .is-total {
border-bottom: 0; border-top: 1px solid var(--color-border);
margin-top: 3px; padding-top: 11px; font-weight: 700;
}
.pay-sum .is-total:last-child .pay-sum__val { font-size: 16px; }
.pay-estimate__problems { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.pay-estimate__problems li + li { margin-top: 5px; }
.pay-estimate__count { white-space: nowrap; opacity: .8; font-size: 12px; }
.pay-estimate__more { margin: 8px 0 0; font-size: 12.5px; opacity: .85; line-height: 1.5; }
.pay-estimate__more .link { color: inherit; text-decoration: underline; }
.pay-estimate__note { margin: 14px 0 0; font-size: 12.5px; color: var(--color-muted); line-height: 1.5; }
.pay-batch-err { color: var(--color-danger); font-weight: 700; }
.pay-batch-err::before { content: "· "; color: var(--color-muted); font-weight: 400; }
@media (max-width: 640px) {
.pay-estimate__sum { font-size: 26px; }
.pay-actions__hint { margin-left: 0; width: 100%; }
}
.chat-dock[hidden] { display: none; }
.chat-dock-min { display: none; }
@media (max-width: 1099px) {
.chat-dock { display: none; }
}
@media (min-width: 1100px) {
html.has-chat-dock .chat-dock-min { display: inline-flex; padding-inline: 9px; }
html.has-chat-dock .chat-dock-min svg { width: 16px; height: 16px; }
.chat-dock__win {
position: fixed; right: 22px; bottom: 22px; z-index: 110;
width: 400px;
height: min(600px, calc(calc(100dvh * var(--vu)) - var(--topbar-h) - 30px));
display: flex; flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-pop);
overflow: hidden;
--dock-dx: 0px; --dock-dy: 0px; --dock-tilt: 0deg; --dock-lift: 1;
transition: box-shadow .22s var(--ease);
animation: chat-dock-pop .28s var(--ease-out);
}
.chat-dock__win.is-back { animation: none; }
.chat-dock__win[hidden] { display: none; }
.chat-dock__win.is-moving {
transform: translate3d(var(--dock-dx), var(--dock-dy), 0)
rotate(var(--dock-tilt)) scale(var(--dock-lift));
will-change: transform;
}
.chat-dock__win.is-dragging {
box-shadow: 0 34px 74px -22px rgba(12, 14, 18, 0.38),
0 12px 26px -14px rgba(12, 14, 18, 0.24);
}
html[data-theme="dark"] .chat-dock__win.is-dragging {
box-shadow: 0 34px 84px rgba(0, 0, 0, 0.78), 0 12px 28px rgba(0, 0, 0, 0.62);
}
.chat-dock__win.is-dragging .chat-dock__bar { cursor: grabbing; }
@keyframes chat-dock-pop {
from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.965); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.chat-dock__win { animation: none; transition: none; }
}
.chat-dock__bar {
display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
padding: 8px 9px 8px 10px;
background: var(--color-surface-soft);
border-bottom: 1px solid var(--color-border);
cursor: grab; user-select: none; touch-action: none;
}
.chat-dock__bar:active { cursor: grabbing; }
.chat-dock__ava { display: flex; flex: 0 0 auto; }
.chat-dock__ava:empty { display: none; }
.chat-dock__bar .chat-dock__avatar {
width: 30px; height: 30px; font-size: 13px;
box-shadow: 0 0 0 1px var(--color-surface);
}
.chat-dock__who { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.chat-dock__title {
flex: 0 1 auto; min-width: 0;
font-size: 14px; font-weight: 700; color: var(--color-heading);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-dock__eye { width: 14px; height: 14px; flex: 0 0 auto; color: var(--color-muted); }
.chat-dock__eye[hidden] { display: none; }
.chat-dock__tools { display: flex; gap: 4px; flex: 0 0 auto; }
.chat-dock__btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0;
border: 0; border-radius: var(--radius-sm);
background: transparent; color: var(--color-muted); cursor: pointer;
}
.chat-dock__btn:hover { background: var(--color-surface); color: var(--color-heading); }
.chat-dock__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.chat-dock__btn[data-dock-remove]:hover { color: var(--color-danger); }
.chat-dock__btn svg { width: 15px; height: 15px; }
.chat-dock__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-dock__body:empty { align-items: center; justify-content: center; }
.chat-dock__body:empty::before {
content: "Открываем переписку…"; color: var(--color-muted); font-size: 13px;
}
.chat-dock__body .chat-pane__inner {
display: flex; flex-direction: column; min-height: 0; height: 100%;
}
.chat-dock__body .chat-pane__head { display: none; }
.chat-dock__body .chat-card,
html[data-theme="dark"] .chat-dock__body .chat-card,
html[data-theme="light"] .chat-dock__body .chat-card {
flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0;
box-shadow: none; background: transparent; padding: 10px 12px 12px;
}
.chat-dock__body .chat-box { border: 0; min-height: 0; padding: 4px 2px 10px 8px; }
.chat-dock__body .chat-observe-note { padding: 8px 12px; font-size: 12.5px; }
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator { pointer-events: none; }
input[type="date"].input,
input[type="date"].input-sm,
input[type="date"].form-control,
input[type="month"].input,
input[type="month"].input-sm,
input[type="month"].form-control { cursor: pointer; }
.datepick--month .datepick__months { padding: 2px 0 4px; }
.datepick__title:disabled { cursor: default; }
.datepick__title:disabled:hover { background: none; color: inherit; }
.datepick { z-index: 160; transform-origin: top left; }
.datepick [hidden] { display: none; }
.datepick__title {
border: 0; background: none; font: inherit; cursor: pointer;
font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
color: var(--color-heading); padding: 4px 10px; border-radius: var(--radius-sm);
transition: background-color .12s var(--ease), color .12s var(--ease);
}
.datepick__title:hover { background: var(--color-surface-soft); color: var(--color-primary-dark); }
.datepick__title:focus-visible { outline: none; box-shadow: var(--ring); }
.datepick__day {
cursor: pointer; font: inherit; background: none;
font-size: 13px; font-weight: 700; color: var(--color-text);
font-variant-numeric: tabular-nums;
transition: background-color .12s var(--ease), border-color .12s var(--ease),
color .12s var(--ease);
}
.datepick__day:hover:not(:disabled) {
background: var(--color-primary-soft); border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.datepick__day:focus-visible { outline: none; box-shadow: var(--ring); }
.datepick__day:disabled { cursor: not-allowed; opacity: .3; }
.datepick .periodcal__day.is-today {
background: none; border-color: var(--color-primary);
color: var(--color-primary-dark); font-weight: 800;
}
.datepick .periodcal__day.is-picked {
background: var(--color-primary); border-color: var(--color-primary);
color: var(--color-on-primary); font-weight: 800;
}
.datepick .periodcal__day.is-picked:hover {
background: var(--color-primary-strong); color: var(--color-on-primary);
}
.datepick__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.datepick__mon {
height: 44px; border: 1px solid transparent; border-radius: var(--radius-sm);
background: none; cursor: pointer; font: inherit;
font-size: 13px; font-weight: 700; color: var(--color-text);
transition: background-color .12s var(--ease), border-color .12s var(--ease),
color .12s var(--ease);
}
.datepick__mon:hover {
background: var(--color-primary-soft); border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.datepick__mon:focus-visible { outline: none; box-shadow: var(--ring); }
.datepick__mon.is-today { border-color: var(--color-primary); color: var(--color-primary-dark); font-weight: 800; }
.datepick__mon.is-picked {
background: var(--color-primary); border-color: var(--color-primary);
color: var(--color-on-primary); font-weight: 800;
}
.datepick__foot {
display: flex; gap: 8px; margin-top: 11px; padding-top: 10px;
border-top: 1px solid var(--color-border);
}
.datepick__act {
flex: 1 1 0; min-height: 32px; padding: 0 10px;
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface); color: var(--color-muted);
font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
transition: background-color .12s var(--ease), border-color .12s var(--ease),
color .12s var(--ease);
}
.datepick__act:hover {
background: var(--color-primary-soft); border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.datepick__act:focus-visible { outline: none; box-shadow: var(--ring); }
.datepick__act--clear:hover {
background: var(--color-danger-soft);
border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
color: var(--color-danger);
}
@media (max-width: 560px) {
.datepick__main { width: 320px; }
.datepick .periodcal__day { height: 42px; }
.datepick__day { font-size: 14px; }
.datepick__act { min-height: 38px; font-size: 13px; }
}
input[type="time"]:not([data-timepick="off"])::-webkit-calendar-picker-indicator {
pointer-events: none;
}
input[type="time"]:not([data-timepick="off"]) { cursor: pointer; }
input[type="time"][data-timepick-open] {
border-color: var(--color-primary); box-shadow: var(--ring-soft);
}
.timepick {
position: fixed; z-index: 160; transform-origin: top left;
display: flex; flex-direction: column; gap: 8px;
width: 320px; max-width: calc(100% - 24px); padding: 12px;
border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-pop),
inset 0 0 0 1px color-mix(in srgb, var(--color-heading) 6%, transparent);
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
opacity: 0; transform: translateY(-8px) scale(.96);
transition: opacity .18s var(--ease-out), transform .26s var(--ease-out);
}
.timepick.is-open { opacity: 1; transform: none; }
.timepick--up { transform-origin: bottom left; transform: translateY(8px) scale(.96); }
.timepick--side { transform-origin: center; transform: scale(.96); }
.timepick:not(.is-open) { pointer-events: none; }
.timepick[hidden] { display: none; }
.timepick [hidden] { display: none; }
.timepick__top {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
min-height: 18px;
}
.timepick__head {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--color-faint);
}
.timepick__acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.timepick__act {
padding: 2px 6px; border: 0; border-radius: var(--radius-sm);
background: none; color: var(--color-muted);
font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
transition: background-color .12s var(--ease), color .12s var(--ease);
}
.timepick__act:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.timepick__act:focus-visible { outline: none; box-shadow: var(--ring); }
.timepick__act--clear:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.timepick__val {
position: relative; height: 52px; padding: 0 34px 0 4px;
display: flex; align-items: center; justify-content: center;
background: var(--color-surface-alt);
border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
cursor: text;
transition: background-color .12s var(--ease), border-color .12s var(--ease),
box-shadow .12s var(--ease);
}
.timepick__val:focus-within {
background: var(--color-surface); border-color: var(--color-primary);
box-shadow: var(--ring-soft);
}
.timepick__seg {
width: 72px; height: 44px; padding: 0; margin: 0; border: 0; background: none;
font: inherit; font-size: 32px; font-weight: 800; letter-spacing: -0.02em;
text-align: center; color: var(--color-heading);
font-variant-numeric: tabular-nums; border-radius: 0;
caret-color: var(--color-primary);
user-select: text; -webkit-user-select: text;
transition: color .12s var(--ease), box-shadow .12s var(--ease);
}
.timepick__seg::selection { background: transparent; color: var(--color-primary); }
.timepick__seg:focus { outline: none; box-shadow: none; color: var(--color-primary); }
@keyframes timepick-up {
from { transform: translateY(9px); opacity: .2; }
to { transform: none; opacity: 1; }
}
@keyframes timepick-down {
from { transform: translateY(-9px); opacity: .2; }
to { transform: none; opacity: 1; }
}
@keyframes timepick-pop {
from { transform: scale(.86); opacity: .35; }
to { transform: none; opacity: 1; }
}
.timepick__seg.is-up { animation: timepick-up .2s var(--ease-out); }
.timepick__seg.is-down { animation: timepick-down .2s var(--ease-out); }
.timepick__seg.is-pop { animation: timepick-pop .22s var(--ease-out); }
.timepick__bar {
position: absolute; left: 0; bottom: 5px; height: 3px; width: 0;
border-radius: 3px; background: var(--color-primary);
opacity: 0; pointer-events: none;
transition: opacity .12s var(--ease-out);
}
.timepick__bar.is-on {
opacity: 1;
transition: transform .24s var(--ease-out), width .24s var(--ease-out),
opacity .12s var(--ease-out);
}
.timepick__colon {
width: 14px; text-align: center; transform: translateY(-2px);
font-size: 26px; font-weight: 700; color: var(--color-faint);
}
.timepick__spin {
position: absolute; right: 4px; top: 4px; bottom: 4px; width: 26px;
display: grid; grid-template-rows: 1fr 1fr; gap: 2px;
}
.timepick__step {
display: grid; place-items: center; padding: 0; border: 0;
background: none; color: var(--color-faint);
cursor: pointer; touch-action: manipulation;
border-radius: var(--radius-sm);
transition: background-color .12s var(--ease), color .12s var(--ease),
transform .12s var(--ease-out);
}
.timepick__step:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.timepick__step:active,
.timepick__step.is-held {
background: var(--color-primary); color: var(--color-on-primary);
transform: scale(.86);
}
.timepick__step:focus-visible { outline: none; box-shadow: var(--ring); }
.timepick__step svg { width: 13px; height: 13px; }
@media (max-width: 560px) {
.timepick { max-width: calc(100% - 16px); }
.timepick__val { height: 60px; padding-right: 42px; }
.timepick__seg { width: 80px; height: 50px; font-size: 34px; }
.timepick__colon { width: 16px; font-size: 28px; }
.timepick__spin { width: 34px; }
.timepick__act { padding: 6px 8px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.timepick, .timepick__bar, .timepick__bar.is-on, .timepick__step { transition: none; }
.timepick__seg.is-up,
.timepick__seg.is-down,
.timepick__seg.is-pop { animation: none; }
}
.infodot {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0;
border: 1px solid var(--color-border); border-radius: 50%;
background: var(--color-surface); color: var(--color-faint);
font: inherit; font-size: 13px; font-weight: 800; line-height: 1;
font-style: italic; cursor: help;
transition: background-color .14s var(--ease), border-color .14s var(--ease),
color .14s var(--ease);
}
.infodot:hover,
.infodot[aria-expanded="true"] {
background: var(--color-primary-soft);
border-color: var(--color-primary);
color: var(--color-primary-dark);
}
.infodot:focus-visible { outline: none; box-shadow: var(--ring); }
.infodot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.infotip {
position: fixed; left: 0; top: 0; z-index: 95;
width: max-content; max-width: min(320px, calc(100vw - 24px));
padding: 11px 13px;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-surface); color: var(--color-text);
font-size: 13px; line-height: 1.45;
box-shadow: var(--shadow-pop);
pointer-events: none;
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .14s var(--ease), transform .14s var(--ease),
visibility 0s linear .14s;
}
.infotip--up { transform: translateY(4px); }
.infotip.is-open {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.infotip__arrow {
position: absolute; left: var(--tip-arrow, 22px); top: -6px;
width: 11px; height: 11px; margin-left: -6px;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
border-left: 1px solid var(--color-border);
border-top-left-radius: 3px;
transform: rotate(45deg);
}
.infotip--up .infotip__arrow {
top: auto; bottom: -6px;
border-top: 0; border-left: 0;
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
border-radius: 0 0 3px 0;
}
.card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.set-card {
position: relative; display: flex;
transition: transform 0.18s var(--ease);
}
.set-card > .report-card {
flex: 1 1 auto; min-width: 0; min-height: 104px;
}
.set-card .report-card__foot { padding-right: 34px; }
.set-card:hover { transform: translateY(-3px); }
.set-card:hover > .report-card,
.set-card:focus-within > .report-card {
transform: none;
box-shadow: var(--shadow-pop);
border-color: var(--color-primary);
}
.set-card > .report-card:hover { transform: none; }
.set-card .infodot { position: absolute; right: 14px; bottom: 15px; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.set-card, .set-card:hover { transform: none; transition: none; }
}
.offer-section { display: grid; gap: 12px; }
.offer-section + .offer-section { margin-top: 26px; }
.offer-section__head { display: grid; gap: 4px; }
.offer-section__title { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.offer-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.offer-card {
position: relative; display: grid; gap: 10px; padding: 14px 16px;
border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border);
border-left: 4px solid var(--color-primary); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.offer-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-soft); }
.offer-card--muted { opacity: .72; border-left-color: var(--color-border); }
.offer-card--muted:hover { box-shadow: none; }
.offer-card__link { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.offer-card__head, .offer-card__where, .offer-card__pay, .offer-card__note, .offer-card__meta, .offer-card__actions { position: relative; z-index: 1; pointer-events: none; }
.offer-card__actions { pointer-events: auto; }
.offer-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.offer-card__day { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--color-heading); }
.offer-card__time { display: block; font-size: 14px; font-weight: 700; color: var(--color-primary-dark); margin-top: 2px; font-variant-numeric: tabular-nums; }
.offer-card__type { flex: none; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-muted); font-size: 12px; font-weight: 700; }
.offer-card__where strong { display: block; font-size: 14px; }
.offer-card__where span { display: block; color: var(--color-muted); font-size: 12px; margin-top: 2px; }
.offer-card__pay { display: flex; align-items: baseline; gap: 6px; }
.offer-card__rate {
font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
color: var(--color-heading); font-variant-numeric: tabular-nums;
}
.offer-card__rate-note { font-size: 12.5px; font-weight: 600; color: var(--color-muted); }
.offer-card__note { margin: 0; font-size: 13px; color: var(--color-text); }
.offer-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--color-muted); font-size: 12px; }
.offer-card__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.offer-card__reason { font-size: 12.5px; color: var(--color-muted); font-weight: 600; }
.offer-blocked > summary { cursor: pointer; font-weight: 700; color: var(--color-muted); padding: 6px 0; display: flex; align-items: center; gap: 8px; }
.offer-blocked[open] > summary { margin-bottom: 10px; }
.offer-history .shift-list__link { opacity: .8; }
.offer-detail__note { padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-surface-soft); font-size: 13.5px; }
.offer-detail__by { margin: 0; font-size: 12.5px; color: var(--color-muted); }
.offer-detail__by span + span::before { content: " · "; }
.offer-form { display: block; max-width: 940px; }
.offer-form__alert { margin-bottom: 4px; }
.offer-form__section { display: grid; gap: 12px; padding: 16px 0; }
.offer-form__section ~ .offer-form__section { border-top: 1px solid var(--color-border); }
.offer-form__section:first-of-type { padding-top: 0; }
.offer-form input[type="number"],
.offer-form input[inputmode="decimal"] { max-width: 140px; }
.offer-form input[name="rate_amount"] { max-width: 220px; }
.offer-form__title { font-size: 13px; font-weight: 800; color: var(--color-text); padding: 0; }
.offer-form__note { color: var(--color-muted); font-size: 12.5px; }
[data-audience-cities-box][hidden] { display: none; }
.offer-form__grid {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px; align-items: start;
}
.offer-form__col--full { grid-column: span 6; }
.offer-form__col--half { grid-column: span 3; }
.offer-form__col--third { grid-column: span 2; }
.offer-form__foot {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--color-border);
}
.offer-form__more { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--color-border); }
.offer-form__more-summary {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
cursor: pointer; list-style: none;
font-size: 13px; font-weight: 800; color: var(--color-text);
}
.offer-form__more-summary::-webkit-details-marker { display: none; }
.offer-form__more-summary::before {
content: ""; flex: 0 0 auto; width: 7px; height: 7px;
border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted);
transform: rotate(-45deg); transition: transform .15s ease;
}
.offer-form__more[open] > .offer-form__more-summary::before { transform: rotate(45deg); }
.offer-form__more-hint { font-size: 12.5px; font-weight: 500; color: var(--color-muted); }
.offer-form__more > .offer-form__section:first-of-type { border-top: 0; }
@media (max-width: 760px) {
.offer-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-form__col--full, .offer-form__col--half { grid-column: 1 / -1; }
.offer-form__col--third { grid-column: span 1; }
}
@media (max-width: 460px) {
.offer-form__grid { grid-template-columns: 1fr; }
.offer-form__col--third { grid-column: 1 / -1; }
.offer-form__foot > .btn { flex: 1 1 100%; }
}
.offer-choice { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.offer-choice__item,
.offer-toggle {
display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
cursor: pointer; background: var(--color-surface); transition: border-color .15s var(--ease), background .15s var(--ease);
}
.offer-choice__item:hover, .offer-toggle:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.offer-choice__item:has(input:checked),
.offer-toggle:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.offer-choice__item:has(input:focus-visible),
.offer-toggle:has(input:focus-visible) { box-shadow: var(--ring); }
.offer-choice__item input { margin: 2px 0 0; accent-color: var(--color-primary); flex: none; }
.offer-choice__body, .offer-toggle__body { display: grid; gap: 3px; min-width: 0; }
.offer-choice__title, .offer-toggle__title { font-weight: 700; font-size: 13.5px; color: var(--color-heading); }
.offer-choice__hint, .offer-toggle__hint { color: var(--color-muted); font-size: 12px; line-height: 1.45; }
.offer-toggle { align-self: stretch; align-items: center; position: relative; }
.offer-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.offer-toggle .checkbox__box { flex: none; margin-top: 1px; }
.offer-toggle input:checked + .checkbox__box { background: var(--color-primary); border-color: var(--color-primary); }
.offer-toggle input:checked + .checkbox__box::after { transform: rotate(45deg) scale(1); }
.offer-claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.offer-claim { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-surface-soft); border: 1px solid var(--color-border); }
.offer-claim--pending { border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border)); }
.offer-claim--accepted { border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border)); }
.offer-claim__who { display: grid; gap: 2px; min-width: 0; }
.offer-claim__who span { font-size: 12px; }
.offer-claim__note { font-size: 13px; color: var(--color-text); }
.offer-claim__side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.offer-assign { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hub-tabs__badge { margin-left: 4px; padding: 1px 7px; font-size: 11px; vertical-align: middle; }
@media (max-width: 720px) {
.offer-claim { flex-direction: column; }
.offer-claim__side { justify-content: flex-start; }
}
.mx-offer { display: inline-flex; align-items: center; gap: 3px; margin: 2px 0 3px; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700; line-height: 1.5; text-decoration: none; background: var(--color-primary-soft); color: var(--color-primary-dark); border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent); position: relative; z-index: 2; }
.sched-matrix:not(.sched-matrix--day) .mx-offer {
display: block; text-align: center;
margin: 2px 0 3px; padding: 3px 8px;
font-size: 11px; font-weight: 800; line-height: 1.3;
background: var(--color-primary); color: #FFFFFF;
border: 0; box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary) 40%, transparent);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
z-index: 1;
}
html[data-theme="dark"] .sched-matrix:not(.sched-matrix--day) .mx-offer { color: var(--color-bg); }
.sched-matrix:not(.sched-matrix--day) .mx-offer:hover { background: var(--color-primary-strong); }
.sched-matrix:not(.sched-matrix--day) .mx-offer b {
display: inline-grid; place-items: center;
width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px;
border-radius: 50%; background: color-mix(in srgb, #FFFFFF 32%, transparent);
color: inherit; font-size: 10px; line-height: 1;
}
.mx-offer:hover { border-style: solid; }
.mx-offer b { color: var(--color-warning); }
.mx-offer--day { font-size: 12px; padding: 4px 10px; margin: 0 0 6px; }
.creds-pick-col { width: 36px; }
.creds-pick-col input { display: block; width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.creds-bar[hidden] { display: none; }
.creds-bar__note { font-size: 12.5px; }
.creds-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.creds-pass { font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.creds-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.creds-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cred-card {
display: flex; flex-direction: column; gap: 8px;
padding: 14px 16px; border: 1px solid var(--color-border);
border-radius: var(--radius-lg); background: var(--color-surface);
break-inside: avoid; page-break-inside: avoid;
}
.cred-card__brand { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.cred-card__name { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--color-heading); }
.cred-card__pvz { margin: 0; font-size: 12.5px; color: var(--color-muted); }
.cred-card__rows { margin: 0; display: grid; gap: 6px; }
.cred-card__row { display: flex; align-items: baseline; gap: 10px; }
.cred-card__row dt { flex: 0 0 62px; font-size: 12px; color: var(--color-muted); }
.cred-card__row dd { margin: 0; min-width: 0; font-size: 13.5px; word-break: break-all; }
.cred-card__note { margin: 0; font-size: 11.5px; color: var(--color-muted); }
@media (max-width: 720px) {
.creds-cards { grid-template-columns: minmax(0, 1fr); }
}
@media print {
@page { margin: 12mm; }
body.creds-print-page {
--color-bg: #FFFFFF;
--color-bg-deep: #FFFFFF;
--color-surface: #FFFFFF;
--color-surface-soft: #FFFFFF;
--color-surface-alt: #FFFFFF;
--color-border: #9AA0AA;
--color-border-strong: #6B7280;
--color-divider: #9AA0AA;
--color-text: #000000;
--color-heading: #000000;
--color-muted: #333333;
--color-faint: #333333;
background: #FFFFFF !important;
background-image: none !important;
color: #000000 !important;
}
body.creds-print-page .topbar,
body.creds-print-page .sidebar,
body.creds-print-page .tabbar,
body.creds-print-page .imp-banner,
body.creds-print-page .messages,
body.creds-print-page .railtip,
body.creds-print-page .season-layer,
body.creds-print-page .fb-fab,
body.creds-print-page .fb-modal,
body.creds-print-page .pwa-sheet,
body.creds-print-page .chat-dock,
body.creds-print-page .creds-noprint,
body.creds-print-page .btn { display: none !important; }
body.creds-print-page .app-shell::before,
body.creds-print-page .app-shell::after { content: none !important; display: none !important; }
body.creds-print-page .app-shell,
body.creds-print-page .app-main { display: block !important; }
body.creds-print-page .page {
display: block !important; padding: 0 !important; gap: 0 !important;
max-width: none !important; margin: 0 !important; animation: none !important;
}
body.creds-print-page .creds-cards { gap: 6mm; }
body.creds-print-page .cred-card {
border: 1px solid #444444 !important;
background: #FFFFFF !important;
color: #000000 !important;
}
body.creds-print-page .cred-card__brand,
body.creds-print-page .cred-card__pvz,
body.creds-print-page .cred-card__note,
body.creds-print-page .cred-card__row dt { color: #333333 !important; }
body.creds-print-page .cred-card__name { color: #000000 !important; }
}
.brel-pick { align-items: flex-start; }
.brel-filters { flex-wrap: wrap; max-width: 100%; }
.brel-filters .srep-presets { flex-wrap: wrap; max-width: 100%; }
.brel-emp { flex: 1 1 168px; max-width: 240px; min-width: 0; height: auto; padding: 6px 8px; }
.brel-who { font-weight: 600; }
.brel-table td .cell-muted { display: block; font-size: 12px; }
.agreement-discussion { display: flex; flex-direction: column; gap: 10px; }
.doc-sheet { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.doc-sheet__toggle {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 10px 14px; cursor: pointer; list-style: none;
font-size: 13px; font-weight: 600; color: var(--color-primary-dark);
background: var(--color-surface-soft);
}
.doc-sheet__toggle::-webkit-details-marker { display: none; }
.doc-sheet__chev { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.doc-sheet[open] .doc-sheet__chev { transform: rotate(180deg); }
.doc-sheet__desk { padding: 10px; background: var(--color-surface-soft); }
.doc-sheet__page {
width: 100%; margin: 0 auto;
box-sizing: border-box;
padding: 7% 9.5%;
border-radius: var(--radius-sm, 6px);
background: #fff; color: #111;
font-family: "Times New Roman", Times, serif;
font-size: 13.5px; line-height: 1.45;
box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}
.doc-sheet__p { margin: 0 0 9px; text-align: justify; text-indent: 1.5em; }
.doc-sheet__p--title { text-align: center; text-indent: 0; font-weight: 700; margin-bottom: 2px; }
.doc-sheet__p--split {
display: flex; justify-content: space-between; gap: 16px;
text-indent: 0; text-align: left; margin: 16px 0 14px;
}
.doc-sheet__p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
.doc-sheet__page { padding: 20px 15px; font-size: 13px; }
.doc-sheet__desk { padding: 6px; }
}
.agreement-discussion { display: flex; flex-direction: column; gap: 12px; }
.agreement-thread { display: flex; flex-direction: column; gap: 10px; }
.agreement-thread__feed {
display: flex; flex-direction: column;
max-height: 46vh; overflow-y: auto; scrollbar-width: thin;
padding: 2px 2px 4px;
}
.agreement-thread__day { display: flex; justify-content: center; margin: 12px 0 8px; }
.agreement-thread__day:first-child { margin-top: 0; }
.agreement-thread__day span {
padding: 3px 12px; border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--chat-bubble) 88%, transparent);
font-size: 11.5px; color: var(--color-muted);
}
.agreement-msg {
display: flex; flex-direction: column; gap: 3px;
align-self: flex-start; align-items: flex-start;
max-width: min(86%, 520px);
margin-bottom: 20px;
}
.agreement-msg--own { align-self: flex-end; align-items: flex-end; }
.agreement-msg__who { font-size: 11.5px; font-weight: 600; color: var(--color-muted); padding: 0 6px; }
.agreement-msg__bubble {
position: relative;
padding: 9px 14px 8px; border-radius: 16px; border-bottom-left-radius: 6px;
font-size: 13.5px; line-height: 1.45; word-break: break-word;
background: var(--chat-bubble);
--color-muted: var(--chat-muted);
--color-faint: var(--chat-faint);
}
.agreement-msg--own .agreement-msg__bubble {
background: var(--chat-bubble-own);
--color-muted: var(--chat-muted-own);
--color-faint: var(--chat-faint-own);
border-bottom-left-radius: 16px; border-bottom-right-radius: 6px;
}
html[data-theme="dark"] .agreement-msg--own .agreement-msg__bubble { color: #FFFFFF; }
.agreement-msg__text { display: block; }
.agreement-msg__time {
position: absolute; top: calc(100% + 3px); right: 2px;
font-size: 11.5px; line-height: 1.3; color: var(--chat-stamp);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.agreement-msg:not(.agreement-msg--own) .agreement-msg__time { left: 2px; right: auto; }
.agreement-msg__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.agreement-msg__shot {
display: block; width: 128px; height: 92px; border-radius: 10px; overflow: hidden;
border: 1px solid rgba(127, 127, 127, .35);
}
.agreement-msg__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agreement-msg__file {
display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
padding: 6px 10px; border-radius: 10px; font-size: 12.5px;
background: rgba(127, 127, 127, .16); color: inherit; text-decoration: none;
}
.agreement-msg__file svg { width: 15px; height: 15px; flex: none; }
.agreement-msg__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agreement-thread__compose {
display: flex; align-items: flex-end; gap: 8px;
padding: 7px; border-radius: 16px;
background: var(--color-surface-soft);
border: 1px solid var(--color-border);
}
.agreement-thread__compose:focus-within { border-color: var(--color-primary); }
.agreement-thread__compose textarea.input {
flex: 1 1 auto; min-height: 38px; max-height: 140px; resize: none;
border: none; background: transparent; padding: 8px 4px;
}
.agreement-thread__compose textarea.input:focus { box-shadow: none; outline: none; }
.agreement-thread__send { flex: none; border-radius: 12px; gap: 6px; }
.agreement-thread__send svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
.agreement-thread__send span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.agreement-thread__send { padding-left: 12px; padding-right: 12px; }
}
.agreement-thread__clip {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
color: var(--color-muted);
}
.agreement-thread__clip:hover { color: var(--color-primary-dark); background: rgba(127,127,127,.12); }
.agreement-thread__clip svg { width: 18px; height: 18px; }
.agreement-thread__clip input[type="file"] { display: none; }
.agreement-thread__picked { font-size: 12.5px; color: var(--color-muted); padding: 0 4px; }
.agreement-thread__hint { font-size: 12px; color: var(--color-faint); margin: 0; padding: 0 4px; }
.agreement-thread__empty { font-size: 13px; color: var(--color-faint); margin: 0; }
@media (max-width: 720px) {
.agreement-thread__feed { max-height: none; overflow: visible; }
}
.doc-sheet__letterhead { display: block; margin: -7% -9.5% 7% -9.5%; }
.doc-sheet__mark { display: block; margin: 26px 0 0; }
.doc-sheet__desk--pdf { padding: 0; }
.doc-sheet__pdf {
display: block; width: 100%; height: 0;
padding-bottom: 141.4%;
border: 0; background: var(--color-surface-soft);
}
@supports (aspect-ratio: 1) {
.doc-sheet__pdf { height: auto; padding-bottom: 0; aspect-ratio: 210 / 297; }
}
.nav-progress {
position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 1000;
height: 3px; pointer-events: none; opacity: 0;
background: linear-gradient(90deg, var(--color-primary), var(--color-coral));
transform: scaleX(0); transform-origin: left center;
transition: opacity .2s var(--ease);
}
html.is-navigating .nav-progress {
opacity: 1;
animation: nav-progress 10s cubic-bezier(.08, .8, .2, 1) forwards;
}
@keyframes nav-progress {
0% { transform: scaleX(0); }
8% { transform: scaleX(.45); }
30% { transform: scaleX(.7); }
100% { transform: scaleX(.96); }
}
@media (prefers-reduced-motion: reduce) {
html.is-navigating .nav-progress { animation: none; transform: scaleX(.6); }
}
.inv-beta { display: flex; gap: 10px; align-items: baseline; margin: 0; padding: 12px 16px;
border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-text); font-size: 14px; }
.inv-beta__tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-pill); padding: 2px 8px;
vertical-align: middle; }
.inv-beta .inv-beta__tag { background: var(--color-surface); flex: none; }
.inv-titlerow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inv-queue__list { margin: 0; padding: 0 18px 14px; list-style: none; display: grid; gap: 6px; }
.inv-groups { margin: 0; }
.inv-groups .chip { gap: 6px; }
.inv-groups__left { font-weight: 500; opacity: .8; }
.inv-group { font-weight: 650; }
.inv-group--rent { color: var(--color-primary); }
.inv-group--utilities { color: var(--color-success); }
.inv-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 14px;
padding: 16px; align-items: end; }
.inv-filters__q { grid-column: span 2; }
.inv-filters__closing { align-self: center; }
.inv-filters__go { display: flex; gap: 8px; align-items: center; }
.inv-table__basis { max-width: 320px; color: var(--color-muted); }
.inv-money { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
.inv-pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 14px; }
.inv-note { margin: 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-surface-soft);
color: var(--color-text); font-size: 14px; }
.inv-note--warn { background: var(--color-warning-soft); }
.inv-review { display: grid; gap: 18px; }
.inv-review__doc { min-width: 0; }
.inv-review__forms { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.inv-review__forms > form { display: flex; flex-direction: column; gap: 16px; }
.inv-review__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (min-width: 1100px) {
.inv-review { grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); align-items: start; }
.inv-review__doc { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
}
.inv-pages { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.inv-pages__page { position: relative; display: block; width: 100%; border: 1px solid var(--color-border);
border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.inv-pages__page img { display: block; width: 100%; height: auto; }
@media (max-width: 1099px) {
.inv-pages { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
padding-bottom: 6px; align-items: flex-start; }
.inv-pages__page { flex: 0 0 min(62%, 380px); scroll-snap-align: start; }
.inv-pages > .btn { flex: none; align-self: center; }
}
.inv-pages__num { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; padding: 2px 8px;
border-radius: var(--radius-pill); background: rgba(0, 0, 0, .55); color: #fff; }
.inv-doc { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.inv-doc--closing { border-left: 3px solid var(--color-border); }
.inv-doc.is-skipped { opacity: .55; }
.inv-doc.is-skipped .inv-doc__grid, .inv-doc.is-skipped .inv-more { display: none; }
.inv-doc__head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.inv-doc__title { font-weight: 700; font-size: 16px; }
.inv-doc__sum { margin-left: auto; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-doc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; }
.inv-field--wide, .inv-link { grid-column: 1 / -1; }
.inv-link[hidden] { display: none; }
.inv-field.has-error .input { border-color: var(--color-danger); }
.inv-mark { font-size: 12px; line-height: 1.3; }
.inv-mark--ok { color: var(--color-success); }
.inv-mark--warn { color: var(--color-warning); font-weight: 650; }
.inv-mark--empty { color: var(--color-muted); }
.inv-more > summary { cursor: pointer; color: var(--color-primary); font-size: 14px; font-weight: 600; }
.inv-more[open] > summary { margin-bottom: 10px; }
.inv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inv-checks__item { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: var(--radius-sm);
background: var(--color-surface-soft); font-size: 13px; }
.inv-checks__item--ok { background: var(--color-success-soft); }
.inv-checks__item--warn { background: var(--color-warning-soft); }
.inv-checks__item--fail { background: var(--color-danger-soft); }
.inv-checks__title { font-weight: 650; }
.inv-raw { max-height: 360px; overflow: auto; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--color-surface-soft); white-space: pre-wrap; word-break: break-word;
font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.inv-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 18px; margin: 0; }
.inv-props dt { font-size: 12px; color: var(--color-muted); }
.inv-props dd { margin: 2px 0 0; word-break: break-word; }
.inv-props--wide { grid-column: 1 / -1; }
.inv-pay form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.inv-list { margin: 0; padding: 0 20px 16px 38px; display: grid; gap: 6px; }
.inv-pad { padding: 0 20px 16px; }
details.inv-pad { padding: 14px 18px; }
.inv-inline { display: inline-flex; margin: 0; }
.inv-danger { color: var(--color-danger); }
.inv-danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.inv-queue__item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-queue__item a { min-width: 0; overflow-wrap: anywhere; }
.inv-queue__drop { margin: 0 0 0 auto; }
.inv-queue__x { width: 28px; height: 28px; border-radius: var(--radius-pill); font-size: 18px; line-height: 1;
color: var(--color-muted); }
.inv-queue__x:hover { color: var(--color-danger); background: var(--color-danger-soft); }