/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/font/google/target.css?{"path":"src/app/(frontend)/layout.tsx","import":"Inter","arguments":[{"subsets":["latin","cyrillic"],"display":"swap"}],"variableName":"inter"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.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: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_fcbcbf {font-family: 'Inter', 'Inter Fallback';font-style: normal
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/font/google/target.css?{"path":"src/app/(frontend)/layout.tsx","import":"JetBrains_Mono","arguments":[{"subsets":["latin","cyrillic"],"display":"swap","variable":"--font-jetbrains"}],"variableName":"jetbrainsMono"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/886030b0b59bc5a7-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/0aa834ed78bf6d07-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/67957d42bae0796d-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/f911b923c6adde36-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/939c4f875ee75fbb-s.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/bb3ef058b751a6ad-s.p.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: 'JetBrains Mono Fallback';src: local("Arial");ascent-override: 75.79%;descent-override: 22.29%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_89caef {font-family: 'JetBrains Mono', 'JetBrains Mono Fallback';font-style: normal
}.__variable_89caef {--font-jetbrains: 'JetBrains Mono', 'JetBrains Mono Fallback'
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/(frontend)/globals.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: var(--font-sans);
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: var(--font-mono);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-xs: var(--radius-xs);
    --radius-sm: var(--radius-sm);
    --radius-md: var(--radius-md);
    --radius-lg: var(--radius-lg);
    --radius-xl: var(--radius-xl);
    --radius-2xl: var(--radius-2xl);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-display: var(--font-display);
    --radius-full: var(--radius-full);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .visible\! {
    visibility: visible !important;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .row-3 {
    grid-row: 3;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-1 {
    margin: calc(var(--spacing) * 1);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .grid\! {
    display: grid !important;
  }
  .hidden {
    display: none;
  }
  .hidden\! {
    display: none !important;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .table-row {
    display: table-row;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: var(--radius-full);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-border {
    border-color: var(--border);
  }
  .bg-accent {
    background-color: var(--accent);
  }
  .bg-background {
    background-color: var(--background);
  }
  .bg-background\/80 {
    background-color: var(--background);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--background) 80%, transparent);
    }
  }
  .bg-card {
    background-color: var(--card);
  }
  .bg-muted-foreground {
    background-color: var(--muted-foreground);
  }
  .bg-muted\/50 {
    background-color: var(--muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-accent-foreground {
    color: var(--accent-foreground);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-input {
    color: var(--input);
  }
  .text-muted-foreground {
    color: var(--muted-foreground);
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-card {
    --tw-shadow-color: var(--card);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--card) var(--tw-shadow-alpha), transparent);
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .\[id\:m0435\] {
    id: m0435;
  }
  .\[mm\:ss\] {
    mm: ss;
  }
  .fade-in {
    --tw-enter-opacity: 0;
  }
  .fade-out {
    --tw-exit-opacity: 0;
  }
  .running {
    animation-play-state: running;
  }
  .group-hover\:opacity-20 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 20%;
      }
    }
  }
  .hover\:bg-accent {
    &:hover {
      @media (hover: hover) {
        background-color: var(--accent);
      }
    }
  }
  .hover\:bg-accent\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--accent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-primary\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--primary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
        }
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:grid-cols-4 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}
@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}
@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}
@property --tw-animation-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}
@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@layer base {
  :root {
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, "Liberation Mono", monospace;
    --font-display: var(--font-sans);
    --text-xs: 0.846rem;
    --text-sm: 0.923rem;
    --text-base: 1.000rem;
    --text-md: 1.077rem;
    --text-lg: 1.231rem;
    --text-xl: 1.385rem;
    --text-2xl: 1.538rem;
    --text-3xl: 1.846rem;
    --text-4xl: 2.462rem;
    --leading-tight: 1.20;
    --leading-snug: 1.35;
    --leading-normal: 1.50;
    --leading-relaxed: 1.65;
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --space-0: 0;
    --space-0-5: 0.154rem;
    --space-1: 0.308rem;
    --space-1-5: 0.462rem;
    --space-2: 0.615rem;
    --space-3: 0.923rem;
    --space-4: 1.231rem;
    --space-5: 1.538rem;
    --space-6: 1.846rem;
    --space-8: 2.462rem;
    --space-10: 3.077rem;
    --space-12: 3.692rem;
    --space-16: 4.923rem;
    --radius: 0.5rem;
    --radius-xs: 0.125rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 12px);
    --radius-full: 9999px;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .04);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .06), 0 1px 3px 0 rgb(0 0 0 / .04);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .10), 0 4px 6px -4px rgb(0 0 0 / .08);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .12), 0 8px 10px -6px rgb(0 0 0 / .08);
    --shadow-focus: 0 0 0 3px oklch(0.546 0.245 262.881 / .35);
    --shadow-focus-destructive: 0 0 0 3px oklch(0.637 0.237 25.331 / .35);
    --motion-fast: 120ms;
    --motion-normal: 200ms;
    --motion-slow: 320ms;
    --motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --motion-ease-decel: cubic-bezier(0, 0, 0, 1);
    --motion-ease-accel: cubic-bezier(.4, 0, 1, 1);
    --motion-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --z-base: 0;
    --z-sticky: 100;
    --z-dropdown: 1000;
    --z-header: 1100;
    --z-overlay: 1200;
    --z-modal: 1300;
    --z-toast: 1400;
    --z-popover: 1500;
    --z-tooltip: 1600;
    --canvas-max-reading: 720px;
    --canvas-max-content: 1440px;
    --canvas-max-wide: 1600px;
    --canvas-gutter-mobile: 16px;
    --canvas-gutter-tablet: 24px;
    --canvas-gutter-desktop: 32px;
    --safe-top: env(safe-area-inset-top,    0px);
    --safe-right: env(safe-area-inset-right,  0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left,   0px);
    --touch-target: 44px;
    --gray-50: oklch(0.985 0.002 247.839);
    --gray-100: oklch(0.967 0.003 264.542);
    --gray-200: oklch(0.928 0.006 264.531);
    --gray-300: oklch(0.872 0.010 258.338);
    --gray-400: oklch(0.707 0.022 261.325);
    --gray-500: oklch(0.551 0.027 264.364);
    --gray-600: oklch(0.446 0.030 256.802);
    --gray-700: oklch(0.373 0.034 259.733);
    --gray-800: oklch(0.278 0.033 256.848);
    --gray-900: oklch(0.210 0.034 264.665);
    --gray-950: oklch(0.130 0.028 261.692);
    --blue-50: oklch(0.975 0.013 258.000);
    --blue-100: oklch(0.940 0.030 258.000);
    --blue-200: oklch(0.888 0.062 258.000);
    --blue-300: oklch(0.803 0.115 258.000);
    --blue-400: oklch(0.695 0.180 262.000);
    --blue-500: oklch(0.623 0.214 259.815);
    --blue-600: oklch(0.546 0.245 262.881);
    --blue-700: oklch(0.480 0.218 262.000);
    --blue-800: oklch(0.412 0.180 261.000);
    --blue-900: oklch(0.337 0.138 260.000);
    --blue-950: oklch(0.238 0.100 261.000);
    --green-50: oklch(0.972 0.036 150.000);
    --green-100: oklch(0.938 0.070 150.000);
    --green-200: oklch(0.880 0.128 155.000);
    --green-300: oklch(0.810 0.178 155.000);
    --green-400: oklch(0.730 0.200 158.000);
    --green-500: oklch(0.680 0.195 160.500);
    --green-600: oklch(0.608 0.182 162.000);
    --green-700: oklch(0.510 0.148 163.000);
    --green-800: oklch(0.420 0.115 163.000);
    --green-900: oklch(0.345 0.085 163.000);
    --green-950: oklch(0.240 0.058 163.000);
    --amber-50: oklch(0.985 0.024 95.000);
    --amber-100: oklch(0.955 0.058 92.000);
    --amber-200: oklch(0.910 0.115 90.000);
    --amber-300: oklch(0.858 0.160 85.000);
    --amber-400: oklch(0.810 0.180 78.000);
    --amber-500: oklch(0.770 0.170 70.500);
    --amber-600: oklch(0.685 0.160 60.000);
    --amber-700: oklch(0.575 0.140 55.000);
    --amber-800: oklch(0.472 0.118 52.000);
    --amber-900: oklch(0.395 0.095 50.000);
    --amber-950: oklch(0.275 0.066 48.000);
    --red-50: oklch(0.975 0.016 17.000);
    --red-100: oklch(0.948 0.034 17.000);
    --red-200: oklch(0.895 0.075 18.000);
    --red-300: oklch(0.822 0.140 22.000);
    --red-400: oklch(0.742 0.198 25.000);
    --red-500: oklch(0.637 0.237 25.331);
    --red-600: oklch(0.575 0.230 26.500);
    --red-700: oklch(0.505 0.205 27.500);
    --red-800: oklch(0.420 0.170 28.000);
    --red-900: oklch(0.350 0.135 28.000);
    --red-950: oklch(0.245 0.088 28.000);
    --violet-50: oklch(0.975 0.014 295.000);
    --violet-100: oklch(0.945 0.035 295.000);
    --violet-200: oklch(0.890 0.080 296.000);
    --violet-300: oklch(0.805 0.143 297.000);
    --violet-400: oklch(0.706 0.195 300.000);
    --violet-500: oklch(0.620 0.225 302.000);
    --violet-600: oklch(0.555 0.245 303.500);
    --violet-700: oklch(0.472 0.220 303.500);
    --violet-800: oklch(0.388 0.180 303.000);
    --violet-900: oklch(0.315 0.138 302.000);
    --violet-950: oklch(0.220 0.093 302.000);
    --cyan-500: oklch(0.750 0.137 205.000);
    --indigo-500: oklch(0.608 0.185 276.000);
    --orange-500: oklch(0.710 0.188 50.000);
    --pink-500: oklch(0.690 0.210 358.000);
    --background: var(--gray-50);
    --surface-1: oklch(1 0 0);
    --surface-2: var(--gray-50);
    --surface-3: var(--gray-100);
    --foreground: var(--gray-950);
    --card: oklch(1 0 0);
    --card-foreground: var(--gray-950);
    --popover: oklch(1 0 0);
    --popover-foreground: var(--gray-950);
    --muted: var(--gray-100);
    --muted-foreground: var(--gray-500);
    --accent: var(--gray-100);
    --accent-foreground: var(--gray-900);
    --border: var(--gray-200);
    --border-strong: var(--gray-300);
    --input: var(--gray-200);
    --ring: oklch(0.48 0.24 264);
    --primary: oklch(0.48 0.24 264);
    --primary-foreground: var(--gray-50);
    --secondary: var(--gray-100);
    --secondary-foreground: var(--gray-900);
    --accent: #f06292;
    --accent-foreground: oklch(1 0 0);
    --brand-sky: #22c8ee;
    --success: #059669;
    --success-foreground: oklch(1 0 0);
    --success-soft: color-mix(in oklch, #059669 14%, transparent);
    --warning: #f59f28;
    --warning-foreground: var(--gray-950);
    --warning-soft: color-mix(in oklch, #f59f28 14%, transparent);
    --danger: #e24555;
    --danger-foreground: oklch(1 0 0);
    --danger-soft: color-mix(in oklch, #e24555 14%, transparent);
    --destructive: var(--danger);
    --destructive-foreground: var(--danger-foreground);
    --info: #3daeff;
    --info-foreground: oklch(1 0 0);
    --info-soft: color-mix(in oklch, #3daeff 14%, transparent);
    --grad-brand: linear-gradient(135deg,#4F46E5 0%,#a855f7 50%,#ea5ec1 100%);
    --grad-sunset: linear-gradient(135deg,#f59f28 0%,#f06292 55%,#ea5ec1 100%);
    --grad-ocean: linear-gradient(135deg,#22c8ee 0%,#3daeff 45%,#4F46E5 100%);
    --grad-forest: linear-gradient(135deg,#10B981 0%,#06b6d4 100%);
    --grad-pastel: linear-gradient(135deg,#fde2ff 0%,#d4d4ff 50%,#cfe3ff 100%);
    --grad-blob-brand: radial-gradient(60% 60% at 30% 30%, color-mix(in oklch,#a855f7 40%,transparent), transparent 70%);
    --grad-blob-sunset: radial-gradient(60% 60% at 30% 30%, color-mix(in oklch,#f06292 40%,transparent), transparent 70%);
    --grad-blob-ocean: radial-gradient(60% 60% at 30% 30%, color-mix(in oklch,#22c8ee 40%,transparent), transparent 70%);
    --sidebar: var(--gray-50);
    --sidebar-background: var(--gray-50);
    --sidebar-foreground: var(--gray-700);
    --sidebar-primary: var(--gray-950);
    --sidebar-primary-foreground: var(--gray-50);
    --sidebar-accent: var(--gray-100);
    --sidebar-accent-foreground: var(--gray-900);
    --sidebar-border: var(--gray-200);
    --sidebar-ring: var(--blue-600);
    --chart-1: var(--blue-500);
    --chart-2: oklch(0.631 0.101 183.491);
    --chart-3: var(--gray-700);
    --chart-4: oklch(0.834 0.119 88.146);
    --chart-5: oklch(0.783 0.126 58.749);
    --section-icon: var(--muted-fg);
    --section-icon-active: var(--foreground);
    --section-home-from: var(--muted-fg);
    --section-home-to: var(--muted-fg);
    --section-contacts-from: var(--muted-fg);
    --section-contacts-to: var(--muted-fg);
    --section-groups-from: var(--muted-fg);
    --section-groups-to: var(--muted-fg);
    --section-events-from: var(--muted-fg);
    --section-events-to: var(--muted-fg);
    --section-media-from: var(--muted-fg);
    --section-media-to: var(--muted-fg);
    --section-learning-from: var(--muted-fg);
    --section-learning-to: var(--muted-fg);
    --section-admin-from: var(--muted-fg);
    --section-admin-to: var(--muted-fg);
    --status-contact: #9CA3AF;
    --status-new: #3daeff;
    --status-regular: #059669;
    --status-engaged: #4F46E5;
    --status-inactive: #f59f28;
    --status-former: #e24555;
    --status-reserved-1: var(--gray-400);
    --status-reserved-2: var(--gray-400);
    --status-reserved-3: var(--gray-400);
  }
  .dark {
    --background: var(--gray-950);
    --surface-1: var(--gray-900);
    --surface-2: var(--gray-800);
    --surface-3: oklch(0.330 0.034 258.000);
    --foreground: var(--gray-50);
    --card: var(--gray-900);
    --card-foreground: var(--gray-50);
    --popover: var(--gray-900);
    --popover-foreground: var(--gray-50);
    --muted: var(--gray-800);
    --muted-foreground: var(--gray-400);
    --accent: var(--gray-800);
    --accent-foreground: var(--gray-50);
    --border: var(--gray-800);
    --border-strong: var(--gray-700);
    --input: var(--gray-800);
    --ring: oklch(0.62 0.22 264);
    --primary: oklch(0.62 0.22 264);
    --primary-foreground: var(--gray-50);
    --secondary: var(--gray-800);
    --secondary-foreground: var(--gray-50);
    --accent: #f06292;
    --accent-foreground: oklch(1 0 0);
    --brand-sky: #22c8ee;
    --success: #10B981;
    --success-soft: color-mix(in oklch, #10B981 18%, transparent);
    --warning: #f5b24c;
    --warning-soft: color-mix(in oklch, #f5b24c 18%, transparent);
    --danger: #ef5566;
    --danger-soft: color-mix(in oklch, #ef5566 18%, transparent);
    --destructive: var(--danger);
    --info: #5ebaff;
    --info-soft: color-mix(in oklch, #5ebaff 18%, transparent);
    --sidebar: var(--gray-950);
    --sidebar-background: var(--gray-950);
    --sidebar-foreground: var(--gray-100);
    --sidebar-primary: var(--blue-600);
    --sidebar-primary-foreground: var(--gray-50);
    --sidebar-accent: var(--gray-800);
    --sidebar-accent-foreground: var(--gray-100);
    --sidebar-border: var(--gray-800);
    --sidebar-ring: var(--blue-500);
    --chart-1: var(--blue-600);
    --chart-2: oklch(0.698 0.134 165.463);
    --chart-3: var(--gray-400);
    --chart-4: oklch(0.619 0.204 312.728);
    --chart-5: oklch(0.612 0.209 6.386);
  }
}
html {
  font-size: 14px;
}
@media (max-width: 767px) {
  html {
    font-size: 15px;
  }
}
@layer base {
  * {
    border-color: var(--border);
    outline-color: var(--ring);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-feature-settings: "cv02","cv03","cv04","cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  code, kbd, samp, pre {
    font-family: var(--font-mono);
  }
  .num-tabular,
  td.num, th.num {
    font-variant-numeric: tabular-nums;
  }
}
.pe-canvas {
  max-width: var(--canvas-max-content);
  margin-inline: auto;
  padding-inline: var(--canvas-gutter-desktop);
}
.pe-canvas-wide {
  max-width: var(--canvas-max-wide);
  margin-inline: auto;
  padding-inline: var(--canvas-gutter-desktop);
}
.pe-canvas-reading {
  max-width: var(--canvas-max-reading);
  margin-inline: auto;
  padding-inline: var(--canvas-gutter-desktop);
}
@media (max-width: 1279px) {
  .pe-canvas, .pe-canvas-wide, .pe-canvas-reading {
    padding-inline: var(--canvas-gutter-tablet);
  }
}
@media (max-width: 767px) {
  .pe-canvas, .pe-canvas-wide, .pe-canvas-reading {
    padding-inline: var(--canvas-gutter-mobile);
  }
}
.pe-safe-top {
  padding-top: var(--safe-top);
}
.pe-safe-bottom {
  padding-bottom: var(--safe-bottom);
}
.pe-safe-x {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
.pe-h1 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.pe-h2 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
}
.pe-h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
}
.pe-card-title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.pe-stat-number {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pe-body {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--foreground);
}
.pe-body-lg {
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
}
.pe-muted {
  font-size: var(--text-base);
  color: var(--muted-foreground);
}
.pe-caption {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.pe-label {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
}
.pe-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/(frontend)/components.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ================================================================
   PlusEngine — components.css
   Single source of truth for phase-1+2+3 atoms & molecules.
   Keep in sync with phase-1-components/*.html (they import this file).
   Do NOT edit tokens without updating src/app/(frontend)/globals.css.
   ================================================================ */

/* ========= TOKENS =========
   Mirror of design-system/globals.css (which mirrors
   src/app/(frontend)/globals.css). Keep the two in sync — any change
   to tokens must land in BOTH files. Components may only consume tokens
   defined here; never use raw OKLCH values inside rules. */
:root{
  --font-sans:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* Gray (chrome, text, borders) */
  --gray-50:oklch(.985 .002 247.839);
  --gray-100:oklch(.967 .003 264.542);
  --gray-200:oklch(.928 .006 264.531);
  --gray-300:oklch(.872 .010 258.338);
  --gray-400:oklch(.707 .022 261.325);
  --gray-500:oklch(.551 .027 264.364);
  --gray-600:oklch(.446 .030 256.802);
  --gray-700:oklch(.373 .034 259.733);
  --gray-800:oklch(.278 .033 256.848);
  --gray-900:oklch(.210 .034 264.665);
  --gray-950:oklch(.130 .028 261.692);

  /* Blue (brand / primary) */
  --blue-50:oklch(.975 .013 258);
  --blue-100:oklch(.940 .030 258);
  --blue-200:oklch(.888 .062 258);
  --blue-300:oklch(.803 .115 258);
  --blue-400:oklch(.695 .180 262);
  --blue-500:oklch(.623 .214 259.815);
  --blue-600:oklch(.546 .245 262.881);
  --blue-700:oklch(.480 .218 262);
  --blue-800:oklch(.412 .180 261);
  --blue-900:oklch(.337 .138 260);
  --blue-950:oklch(.238 .100 261);

  /* Green (success / regular) */
  --green-50:oklch(.972 .036 150);
  --green-100:oklch(.938 .070 150);
  --green-500:oklch(.680 .195 160.5);
  --green-600:oklch(.608 .182 162);
  --green-700:oklch(.510 .148 163);

  /* Amber (warning / inactive) */
  --amber-50:oklch(.985 .024 95);
  --amber-100:oklch(.955 .058 92);
  --amber-500:oklch(.770 .170 70.5);
  --amber-700:oklch(.575 .140 55);

  /* Red (danger / former) */
  --red-50:oklch(.975 .016 17);
  --red-100:oklch(.948 .034 17);
  --red-400:oklch(.742 .198 25);
  --red-500:oklch(.637 .237 25.331);
  --red-600:oklch(.575 .230 26.5);

  /* Violet (engaged / events) */
  --violet-100:oklch(.945 .035 295);
  --violet-500:oklch(.620 .225 302);
  --violet-700:oklch(.472 .220 303.5);

  /* Section accents */
  --cyan-500:oklch(.750 .137 205);       /* groups   */
  --indigo-500:oklch(.608 .185 276);     /* contacts */
  --orange-500:oklch(.710 .188 50);      /* admin    */
  --pink-500:oklch(.690 .210 358);       /* birthdays */

  /* ─── Semantic (light) ─── */
  --background:var(--gray-50);
  --surface-1:#fff;
  --surface-2:var(--gray-50);
  --surface-3:var(--gray-100);
  --foreground:var(--gray-950);
  --muted:var(--gray-100);
  --muted-fg:var(--gray-500);
  --muted-foreground:var(--gray-500); /* shadcn alias */
  --border:var(--gray-200);
  --border-strong:var(--gray-300);
  --input:var(--gray-200);
  --ring:var(--blue-600);
  --primary:var(--blue-600);
  --primary-hover:var(--blue-700);
  --primary-fg:#fff;
  --primary-foreground:#fff;
  --secondary:var(--gray-100);
  --secondary-hover:var(--gray-200);
  --secondary-fg:var(--gray-900);
  --secondary-foreground:var(--gray-900);
  --accent:var(--gray-100);
  --accent-foreground:var(--gray-900);
  --danger:var(--red-500);
  --danger-hover:var(--red-600);
  --danger-fg:#fff;
  --danger-foreground:#fff;
  --danger-soft:var(--red-50);
  --destructive:var(--red-500);
  --destructive-foreground:#fff;
  --success:var(--green-500);
  --success-hover:var(--green-700);
  --success-fg:#fff;
  --success-foreground:#fff;
  --success-soft:var(--green-50);
  --warning:var(--amber-500);
  --warning-hover:var(--amber-700);
  --warning-fg:#111;
  --warning-foreground:var(--gray-950);
  --warning-soft:var(--amber-50);
  --info:var(--blue-500);
  --info-foreground:#fff;
  --info-soft:var(--blue-50);

  /* ─── Contact status (stable hex — matches DEFAULT_STATUSES in repo) ─── */
  --status-contact:#9CA3AF;
  --status-new:#3B82F6;
  --status-regular:#10B981;
  --status-engaged:#8B5CF6;
  --status-inactive:#F59E0B;
  --status-former:#EF4444;

  /* ─── Section gradient endpoints (DEFAULT_SECTION_COLORS) ─── */
  --section-home-from:#8B5CF6;     --section-home-to:#6366F1;
  --section-contacts-from:#6366F1; --section-contacts-to:#3B82F6;
  --section-groups-from:#06B6D4;   --section-groups-to:#10B981;
  --section-events-from:#A855F7;   --section-events-to:#8B5CF6;
  --section-media-from:#EAB308;    --section-media-to:#F97316;
  --section-learning-from:#10B981; --section-learning-to:#059669;
  --section-admin-from:#F97316;    --section-admin-to:#EF4444;

  /* ─── Typography (desktop base = 14px; 1rem ≈ 14px) ─── */
  --text-xs:.846rem;     /* 12px */
  --text-sm:.923rem;     /* 13px */
  --text-base:1rem;      /* 14px */
  --text-md:1.077rem;    /* 15px */
  --text-lg:1.231rem;    /* 17px */
  --text-xl:1.385rem;    /* 19px */
  --text-2xl:1.538rem;   /* 22px */
  --text-3xl:1.846rem;   /* 26px */
  --text-4xl:2.462rem;   /* 34px */
  --leading-tight:1.20;
  --leading-snug:1.35;
  --leading-normal:1.50;
  --leading-relaxed:1.65;
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:.04em;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* ─── Spacing (4px grid, expressed in rem of 14px base) ─── */
  --space-0:0;
  --space-0-5:.154rem;
  --space-1:.308rem;
  --space-1-5:.462rem;
  --space-2:.615rem;
  --space-3:.923rem;
  --space-4:1.231rem;
  --space-5:1.538rem;
  --space-6:1.846rem;
  --space-8:2.462rem;
  --space-10:3.077rem;
  --space-12:3.692rem;
  --space-16:4.923rem;

  /* ─── Radii ─── */
  --radius:.5rem;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-xl:12px;
  --radius-2xl:20px;
  --radius-full:9999px;

  /* ─── Shadows ─── */
  --shadow-xs:0 1px 2px 0 rgb(0 0 0/.04);
  --shadow-sm:0 1px 2px 0 rgb(0 0 0/.06),0 1px 3px 0 rgb(0 0 0/.04);
  --shadow-md:0 4px 6px -1px rgb(0 0 0/.08),0 2px 4px -2px rgb(0 0 0/.05);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0/.10),0 4px 6px -4px rgb(0 0 0/.08);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0/.12),0 8px 10px -6px rgb(0 0 0/.08);
  --shadow-2xl:0 25px 50px -12px rgb(0 0 0/.25);
  --shadow-focus:0 0 0 3px oklch(.546 .245 262.881/.35);
  --shadow-focus-danger:0 0 0 3px oklch(.637 .237 25.331/.35);
  --shadow-focus-destructive:0 0 0 3px oklch(.637 .237 25.331/.35); /* alias */

  /* ─── Motion ─── */
  --motion-fast:120ms;
  --motion-normal:200ms;
  --motion-slow:320ms;
  --motion-ease:cubic-bezier(.2,0,0,1);
  --motion-ease-standard:cubic-bezier(.2,0,0,1);
  --motion-ease-decel:cubic-bezier(0,0,0,1);
  --motion-ease-accel:cubic-bezier(.4,0,1,1);
  --motion-ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ─── Z-index ─── */
  --z-base:0;
  --z-sticky:100;
  --z-dropdown:1000;
  --z-header:1100;
  --z-overlay:1200;
  --z-modal:1300;
  --z-toast:1400;
  --z-popover:1500;
  --z-tooltip:1600;

  /* ─── Touch target ─── */
  --touch-target:44px;
}

html.dark,.dark{
  --background:var(--gray-950);
  --surface-1:var(--gray-900);
  --surface-2:var(--gray-800);
  --surface-3:oklch(.330 .034 258);
  --foreground:var(--gray-50);
  --muted:var(--gray-800);
  --muted-fg:var(--gray-400);
  --muted-foreground:var(--gray-400);
  --border:var(--gray-800);
  --border-strong:var(--gray-700);
  --input:var(--gray-800);
  --ring:var(--blue-500);
  --primary:var(--blue-500);
  --primary-hover:oklch(.695 .180 262);
  --primary-fg:var(--gray-950);
  --primary-foreground:var(--gray-950);
  --secondary:var(--gray-800);
  --secondary-hover:oklch(.330 .034 258);
  --secondary-fg:var(--gray-50);
  --secondary-foreground:var(--gray-50);
  --accent:var(--gray-800);
  --accent-foreground:var(--gray-50);
  --danger:var(--red-400);
  --danger-hover:var(--red-500);
  --danger-soft:oklch(.290 .086 28);
  --destructive:var(--red-400);
  --success:oklch(.730 .200 158);
  --success-soft:oklch(.280 .060 163);
  --warning:oklch(.810 .180 78);
  --warning-soft:oklch(.290 .065 55);
  --info:oklch(.695 .180 262);
  --info-soft:oklch(.260 .082 260);
  --shadow-2xl:0 25px 50px -12px rgb(0 0 0/.6);
}

/* ================================================================
   PRODUCT PALETTE (overrides) — color-lab picks applied
   ----------------------------------------------------------------
   Этот блок — единственный override поверх mirror-токенов. Все
   изменения палитры продукта (primary/accent/semantic/gradients)
   делаем тут. Не трогаем блоки mirror выше.
   Источник: design-system/_work/color-lab.html picks (session N).
   ================================================================ */
:root{
  /* Primary · C · Royal Blue · MiniMax — oklch(0.48 0.24 264) */
  --brand-primary:oklch(.48 .24 264);
  --brand-primary-hover:oklch(.42 .22 264);
  --brand-primary-soft:oklch(.94 .038 264);
  --brand-primary-ring:oklch(.48 .24 264/.35);

  /* Accent · b · Coral · Warm — #f06292 */
  --brand-accent:#f06292;
  --brand-accent-hover:#e94f84;
  --brand-accent-soft:oklch(.96 .035 14);

  /* Sky · s2 · Cyan · Bright — #22c8ee */
  --brand-sky:#22c8ee;
  --brand-sky-soft:oklch(.965 .045 205);

  /* Semantic — new tones */
  --sem-success:#059669;            /* emerald 600, холодный, без желтизны */
  --sem-success-soft:oklch(.95 .045 162);
  --sem-warning:#f59f28;            /* тёплая амбра */
  --sem-warning-soft:oklch(.965 .05 82);
  --sem-danger:#e24555;             /* коралловый red, мягче дефолта */
  --sem-danger-soft:oklch(.96 .035 17);
  --sem-info:#3daeff;               /* sky-синий, отличается от primary */
  --sem-info-soft:oklch(.965 .04 235);

  /* Apply overrides to live tokens */
  --primary:var(--brand-primary);
  --primary-hover:var(--brand-primary-hover);
  --ring:var(--brand-primary);
  --shadow-focus:0 0 0 3px var(--brand-primary-ring);

  --success:var(--sem-success);
  --success-hover:oklch(.42 .14 163);
  --success-soft:var(--sem-success-soft);
  --warning:var(--sem-warning);
  --warning-soft:var(--sem-warning-soft);
  --danger:var(--sem-danger);
  --danger-hover:#c23745;
  --danger-soft:var(--sem-danger-soft);
  --destructive:var(--sem-danger);
  --info:var(--sem-info);
  --info-soft:var(--sem-info-soft);

  /* ─── Section colors · SCENARIO A · полностью убрать ───
     Все section-токены теперь указывают на нейтральный muted-fg.
     Активная секция подсвечивается primary'ем. Цветные SVG-иконки
     на rail/header отключены: используйте color:var(--section-icon). */
  --section-icon:var(--muted-fg);
  --section-icon-active:var(--primary);
  --section-home-from:var(--muted-fg);     --section-home-to:var(--muted-fg);
  --section-contacts-from:var(--muted-fg); --section-contacts-to:var(--muted-fg);
  --section-groups-from:var(--muted-fg);   --section-groups-to:var(--muted-fg);
  --section-events-from:var(--muted-fg);   --section-events-to:var(--muted-fg);
  --section-media-from:var(--muted-fg);    --section-media-to:var(--muted-fg);
  --section-learning-from:var(--muted-fg); --section-learning-to:var(--muted-fg);
  --section-admin-from:var(--muted-fg);    --section-admin-to:var(--muted-fg);

  /* ================ GRADIENTS ================
     5 каноничных градиентов из color-lab. Каждый имеет
     application role (см. design-system/gradients.md). */

  /* G2 · Indigo → Magenta · дружелюбный hero, onboarding, community */
  --grad-indigo-magenta:linear-gradient(135deg,#4F46E5 0%,#a855f7 50%,#ea5ec1 100%);
  --grad-brand:var(--grad-indigo-magenta); /* alias — default brand hero */

  /* G3 · Sunset · Warm · birthdays, celebrations, upgrade moments */
  --grad-sunset:linear-gradient(135deg,#f59f28 0%,#f06292 55%,#ea5ec1 100%);

  /* G4 · Ocean · Cool · analytics, reports, отчёты */
  --grad-ocean:linear-gradient(135deg,#22c8ee 0%,#3daeff 45%,#4F46E5 100%);

  /* G5 · Forest · Calm · success, learning, progress completion */
  --grad-forest:linear-gradient(135deg,#10B981 0%,#06b6d4 100%);

  /* G7 · Pastel Cloud · empty states, blob-подложки, light decoration */
  --grad-pastel:linear-gradient(135deg,#fde2ff 0%,#d4d4ff 50%,#cfe3ff 100%);

  /* Radial blobs (для больших soft-подложек под карточками) */
  --grad-blob-brand:radial-gradient(circle at 30% 30%, #4F46E5 0%, transparent 60%), radial-gradient(circle at 70% 70%, #ea5ec1 0%, transparent 55%);
  --grad-blob-sunset:radial-gradient(circle at 25% 30%, #f59f28 0%, transparent 55%), radial-gradient(circle at 75% 75%, #ea5ec1 0%, transparent 55%);
  --grad-blob-ocean:radial-gradient(circle at 20% 30%, #22c8ee 0%, transparent 55%), radial-gradient(circle at 80% 75%, #4F46E5 0%, transparent 60%);

  /* ================ PILL FAMILY ================
     Общая сетка размеров/тонов для .pill семейства
     (Badge · Chip · StatusPill · DeltaChip). Токены прокинуты
     в override-блок, чтобы значения поднимались и в dark-mode
     (без дублирования). См. phase-1-atoms.html → #pills-family. */
  --pill-h-sm: 20px;
  --pill-h-md: 24px;
  --pill-h-lg: 28px;
  --pill-pad-sm: 0 8px;
  --pill-pad-md: 0 10px;
  --pill-pad-lg: 0 12px;
  --pill-radius: 999px;
  --pill-gap: 6px;           /* между dot/иконкой и текстом */
  --pill-fs-sm: .769rem;
  --pill-fs-md: .846rem;
  --pill-fs-lg: .923rem;
  --pill-dot: 6px;
  --pill-border: 1px;
  /* Tonal mix percentages — одинаковые для всех семейных классов,
     чтобы визуально совпадали .bdg-soft / .chip.is-sel / .sp / .delta. */
  --pill-tone-bg: 14%;       /* fill */
  --pill-tone-border: 22%;   /* border */
}

html.dark{
  --brand-primary-soft:oklch(.28 .08 264);
  --brand-accent-soft:oklch(.30 .08 14);
  --brand-sky-soft:oklch(.30 .08 205);
  --sem-success-soft:oklch(.28 .06 162);
  --sem-warning-soft:oklch(.30 .07 82);
  --sem-danger-soft:oklch(.30 .07 17);
  --sem-info-soft:oklch(.28 .07 235);

  /* В dark pastel-подложка почти невидима — заменяем на brand-soft */
  --grad-pastel:linear-gradient(135deg,#1f2a4a 0%,#2d2460 50%,#3a2250 100%);
}

/* Gradient utility classes
   Использование: <div class="grad grad-brand">…</div>
   .grad базовый — сбрасывает текст на белый для покрытия 4 тёмных градиентов.
   .grad-pastel переопределяет цвет текста обратно на foreground. */
.grad{color:#fff;background:var(--grad-brand)}
.grad-indigo-magenta{background:var(--grad-indigo-magenta);color:#fff}
.grad-brand{background:var(--grad-brand);color:#fff}
.grad-sunset{background:var(--grad-sunset);color:#fff}
.grad-ocean{background:var(--grad-ocean);color:#fff}
.grad-forest{background:var(--grad-forest);color:#fff}
.grad-pastel{background:var(--grad-pastel);color:var(--foreground)}

/* Soft blob versions (подложка под контент, большая blur) */
.grad-blob{position:absolute;inset:-40px;filter:blur(60px);opacity:.45;pointer-events:none;z-index:0}
.grad-blob-brand{background:var(--grad-blob-brand)}
.grad-blob-sunset{background:var(--grad-blob-sunset)}
.grad-blob-ocean{background:var(--grad-blob-ocean)}

/* ========= BASE ========= */
html{font-size:14px}
@media(max-width:767px){html{font-size:15px}}
*{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border)}
body{
  font-family:var(--font-sans);
  background:var(--background);
  color:var(--foreground);
  font-feature-settings:"cv02","cv03","cv04","cv11";
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
  transition:background var(--motion-fast) var(--motion-ease);
}
code{font-family:var(--font-mono);font-size:.923rem;background:var(--muted);padding:.077rem .308rem;border-radius:4px;color:var(--foreground)}
.num{font-variant-numeric:tabular-nums}

/* Icon baseline */
.i{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ================================================================
   ATOMS
   ================================================================ */

/* ---- Button ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-weight:500;font-size:.923rem;line-height:1;border:1px solid transparent;border-radius:var(--radius-md);padding:0 12px;height:32px;cursor:pointer;white-space:nowrap;transition:all var(--motion-fast) var(--motion-ease);user-select:none;text-decoration:none;color:var(--foreground)}
.btn:focus-visible,.btn.f-focus{outline:none;box-shadow:var(--shadow-focus)}
.btn:disabled,.btn.is-loading{opacity:.5;cursor:not-allowed}
.btn:active:not(:disabled),.btn.f-active{transform:scale(.98)}
.btn .i{width:14px;height:14px}
.btn-xs{height:24px;padding:0 8px;font-size:.846rem;border-radius:var(--radius-sm);gap:4px}
.btn-xs .i{width:12px;height:12px}
.btn-sm{height:28px;padding:0 10px;font-size:.846rem}
.btn-lg{height:40px;padding:0 16px;font-size:1rem}
.btn-lg .i{width:16px;height:16px}
.btn-icon{padding:0;width:32px;aspect-ratio:1}
.btn-icon-sm{padding:0;width:28px;aspect-ratio:1}
.btn-icon-md{padding:0;width:32px;aspect-ratio:1}
.btn-icon-lg{padding:0;width:40px;aspect-ratio:1}
.btn-primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.btn-primary:hover:not(:disabled),.btn-primary.f-hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-secondary{background:var(--secondary);color:var(--secondary-fg);border-color:var(--secondary)}
.btn-secondary:hover:not(:disabled){background:var(--secondary-hover);border-color:var(--secondary-hover)}
.btn-outline{background:var(--surface-1);color:var(--foreground);border-color:var(--border-strong)}
.btn-outline:hover:not(:disabled){background:var(--surface-3)}
.btn-ghost{background:transparent;color:var(--foreground);border-color:transparent}
.btn-ghost:hover:not(:disabled){background:var(--surface-3)}
.btn-destructive{background:var(--danger);color:var(--danger-fg);border-color:var(--danger)}
.btn-destructive:hover:not(:disabled){background:var(--danger-hover)}
.btn-destructive:focus-visible,.btn-destructive.f-focus{box-shadow:var(--shadow-focus-danger)}
.btn-link{background:transparent;color:var(--primary);border:0;padding:0;height:auto;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.spin{display:inline-block;width:12px;height:12px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:999px;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---- Field (Input · Textarea) ---- */
.field{display:flex;align-items:center;gap:8px;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:0 10px;transition:all var(--motion-fast) var(--motion-ease);height:36px}
.field input,.field textarea{flex:1;background:transparent;border:0;outline:none;padding:0;font-family:inherit;font-size:1rem;color:var(--foreground);line-height:1.5;width:100%}
.field textarea{padding:8px 0;resize:vertical;min-height:72px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-fg)}
.field-sm{height:28px;font-size:.923rem}
.field-lg{height:44px;font-size:1.077rem}
.field-ta{height:auto;padding:0 10px;align-items:stretch}
.field:hover:not(.is-disabled){border-color:var(--muted-fg)}
.field:focus-within,.field.f-focus{border-color:var(--ring);box-shadow:var(--shadow-focus)}
.field.is-invalid{border-color:var(--danger)}
.field.is-invalid:focus-within,.field.is-invalid.f-focus{box-shadow:var(--shadow-focus-danger)}
.field.is-disabled{background:var(--muted);opacity:.7;cursor:not-allowed}
.field .i{color:var(--muted-fg);width:14px;height:14px;flex:none}
.field-clear{background:transparent;border:0;cursor:pointer;padding:2px;border-radius:4px;color:var(--muted-fg);display:flex}
.field-clear:hover{background:var(--muted);color:var(--foreground)}
.field-clear .i{width:12px;height:12px}
.fg{display:flex;flex-direction:column;gap:6px}
.lbl{font-size:.846rem;font-weight:500;color:var(--foreground)}
.hint{font-size:.846rem;color:var(--muted-fg);line-height:1.4}
.err{font-size:.846rem;color:var(--danger)}

/* ---- Select ----
   .sel-trig — триггер поверх .field. Single chevron ▾ = простой select.
   .sel-trig.is-search — double chevron ⇅ = searchable popup (семантический
   сигнал «внутри будет поиск»).

   Leading slots (опциональны):
     .sel-trig .sel-dot     — status-dot, использует .pill .d + .pill-tone-*
     .sel-trig .sel-lead-i  — lucide-иконка 14px
     .sel-trig .sel-code    — mono ISO-код (RU/EN/SK…), без флагов

   Popup:
     .sel-pop               — поповер, 240–320px, max-height 280px
     .sel-pop-search        — .field.field-sm внутри, с leading search-icon
     .sel-list              — скроллируемый список опций (data-scroll-shadow)
     .sel-item              — опция, с необязательными dot/icon/code + trailing ✓
     .sel-empty             — «ничего не найдено»
     .sel-create            — строка «+ Создать "{query}"» наверху, только
                              когда exact match отсутствует

   Multi:
     .sel-multi             — trigger с chip'ами внутри
     .sel-multi-wrap        — chip'ы wrap'аются (высота растёт)
     .sel-multi-clip        — одна строка, overflow скрыт, +N counter-pill
*/
.sel-trig{width:100%;cursor:pointer;justify-content:space-between;background:var(--surface-1);font-family:inherit;color:var(--foreground);text-align:left;font-size:1rem;gap:8px}
.sel-trig > .sel-val{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden}
.sel-trig > .sel-val > *{flex:none}
.sel-trig > .sel-val > span:not([class]),
.sel-trig > .sel-val > span.sel-val-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}
/* Leading-slot spacing fallback — gap на inline-flex может не срабатывать в
   некоторых каскадах; страхуем margin-right на leading-элементах. */
.sel-val > .sel-code,
.sel-val > .sel-lead-i,
.sel-val > .pill{margin-right:0}
.sel-val > .sel-code + span,
.sel-val > .sel-lead-i + span,
.sel-val > .pill + span{margin-left:0}
.sel-trig > .sel-chev{color:var(--muted-fg);flex:none;width:14px;height:14px}
.sel-trig[aria-expanded="true"]{border-color:var(--primary);box-shadow:var(--shadow-focus)}
.sel-trig.is-invalid{border-color:var(--danger)}
.sel-trig.is-invalid[aria-expanded="true"]{box-shadow:var(--shadow-focus-danger)}

/* Leading slot helpers */
.sel-lead-i{width:14px;height:14px;color:var(--muted-fg);flex:none}
.sel-code{font-family:var(--font-mono);font-size:.769rem;font-weight:600;color:var(--muted-fg);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 5px;height:18px;display:inline-flex;align-items:center;letter-spacing:.02em;flex:none}

/* Popup */
.sel-pop{position:absolute;z-index:50;margin-top:4px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:240px;max-width:320px;display:flex;flex-direction:column;overflow:hidden}
.sel-pop-search{padding:8px;border-bottom:1px solid var(--border);background:var(--surface-1)}
.sel-pop-search .field{width:100%}
.sel-list{padding:4px;max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.sel-list > .scroll-wrap{flex:1}

/* Kept for back-compat — simple inline menu */
.sel-menu{margin-top:4px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:4px;max-width:280px}

/* Item — общий для .sel-menu и .sel-list */
.sel-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:var(--radius-sm);background:transparent;border:0;font-family:inherit;font-size:.923rem;color:var(--foreground);cursor:pointer;text-align:left}
.sel-item:hover,.sel-item.is-active{background:var(--surface-3)}
.sel-item.is-active{color:var(--primary);font-weight:500}
.sel-item > .sel-item-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-item > .sel-item-sub{font-size:.846rem;color:var(--muted-fg);margin-left:auto;font-variant-numeric:tabular-nums}
.sel-item > .sel-item-check{margin-left:auto;color:var(--primary);width:14px;height:14px;flex:none}
.sel-item .i:first-child{width:14px;height:14px;color:var(--muted-fg);flex:none}
.sel-item.is-active .i:first-child{color:var(--primary)}
.sel-group{font-size:.769rem;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.04em;font-weight:600;padding:6px 8px 2px}
.sel-sep{height:1px;background:var(--border);margin:4px 0}

/* Creatable row — «+ Создать "query"» наверху */
.sel-create{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:var(--radius-sm);background:transparent;border:0;font-family:inherit;font-size:.923rem;color:var(--primary);cursor:pointer;text-align:left;font-weight:500}
.sel-create:hover{background:color-mix(in oklch,var(--primary) 8%,transparent)}
.sel-create .i{width:14px;height:14px;flex:none}
.sel-create-q{font-weight:600}

.sel-empty{padding:18px 12px;text-align:center;color:var(--muted-fg);font-size:.846rem}

/* Multi-select */
.sel-multi{min-height:36px;height:auto;padding:4px 8px 4px 6px;align-items:center;display:flex;gap:6px;flex-wrap:wrap}
.sel-multi > .sel-val{flex:1;display:flex;align-items:center;gap:4px;min-width:80px;flex-wrap:wrap;min-height:26px}
.sel-multi .pill{flex:none}
.sel-multi input.sel-multi-input{border:0;outline:0;background:transparent;font-family:inherit;font-size:.923rem;color:var(--foreground);flex:1;min-width:60px;padding:0;height:24px}
.sel-multi input.sel-multi-input::placeholder{color:var(--muted-fg)}
.sel-multi.sel-multi-clip{flex-wrap:nowrap;overflow:hidden}
.sel-multi.sel-multi-clip > .sel-val{flex-wrap:nowrap;overflow:hidden}
.sel-multi-more{font-family:var(--font-mono);font-size:.769rem;font-weight:600}
.sel-multi > .sel-chev{align-self:center}

/* ---- Checkbox · Radio · Switch ---- */
.chk,.rad,.swt{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.923rem;user-select:none}
.chk input,.rad input,.swt input{position:absolute;opacity:0;pointer-events:none}
.chk-b,.rad-b{width:16px;height:16px;border:1.5px solid var(--border-strong);background:var(--surface-1);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:all var(--motion-fast) var(--motion-ease)}
.chk-b{border-radius:var(--radius-sm)}
.rad-b{border-radius:999px}
.chk input:checked + .chk-b,.chk-b.is-ind{background:var(--primary);border-color:var(--primary);color:#fff}
.chk-b .i{width:10px;height:10px;stroke-width:3}
.rad input:checked + .rad-b{border-color:var(--primary)}
.rad-dot{width:8px;height:8px;background:var(--primary);border-radius:999px;opacity:0;transition:opacity var(--motion-fast) var(--motion-ease)}
.rad input:checked + .rad-b .rad-dot{opacity:1}
.chk input:focus-visible + .chk-b,.rad input:focus-visible + .rad-b,.chk-b.f-focus,.rad-b.f-focus{box-shadow:var(--shadow-focus)}
.chk.is-dis,.rad.is-dis,.swt.is-dis{opacity:.5;cursor:not-allowed}
.swt-t{width:32px;height:18px;background:var(--border-strong);border-radius:999px;position:relative;flex:none;transition:background var(--motion-fast) var(--motion-ease)}
.swt-th{position:absolute;left:2px;top:2px;width:14px;height:14px;background:#fff;border-radius:999px;box-shadow:0 1px 2px rgb(0 0 0 /.15);transition:left 200ms var(--motion-ease)}
.swt input:checked + .swt-t{background:var(--primary)}
.swt input:checked + .swt-t .swt-th{left:16px}
.swt input:focus-visible + .swt-t,.swt-t.f-focus{box-shadow:var(--shadow-focus)}

/* ---- Field slots (leading / trailing / lang-suffix / clear / AI) ----
   .field уже знает position для иконки слева. Для сложных случаев
   используем явные слоты .field-lead / .field-trail — flex:none,
   muted color. Lang-suffix — 2-буквенный ISO-код mono-шрифтом, БЕЗ
   флага и без рамки/фона (плоский inline-tag). Master-язык — primary
   цвет + bolder weight; визуально различим без иконок и текстовых
   суффиксов. Полное название языка передаётся через `title` атрибут
   и видно как нативный tooltip при hover. Optional label suffix —
   .lbl-opt. Required — <span class="lbl-req">*</span>.
*/
.field-lead,.field-trail{display:inline-flex;align-items:center;gap:4px;flex:none;color:var(--muted-fg);font-size:.923rem;line-height:1}
.field-lead{margin-right:2px}
.field-trail{margin-left:2px}
.field-lang{display:inline-flex;align-items:center;flex:none;color:var(--muted-fg);font-family:var(--font-mono);font-size:.769rem;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase;padding-right:8px;margin-right:2px;border-right:1px solid var(--border);min-height:18px;cursor:help}
.field-lang.is-master{color:var(--primary);font-weight:700}
.field-ai{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:color-mix(in oklch,var(--success) 14%,transparent);border:1px solid color-mix(in oklch,var(--success) 22%,transparent);color:var(--success);cursor:pointer;flex:none;transition:all var(--motion-fast) var(--motion-ease)}
.field-ai:hover{background:color-mix(in oklch,var(--success) 22%,transparent)}
.field-ai .i{width:12px;height:12px}
.lbl-req{color:var(--danger);margin-left:2px;font-weight:500}
.lbl-opt{color:var(--muted-fg);font-weight:400;margin-left:6px;font-size:.846rem}

/* ---- MultilangRow ----
   Стопка строк-полей, каждая для одного языка. Применяется для
   персональных данных (имя, фамилия, как называть). Строка =
   .field + leading slot .field-lang. Master-язык: .field-lang.is-master.
   Под стопкой — .lr-add (кнопка «+ добавить перевод»), при клике
   раскрывается inline .lr-picker с code-pill'ами оставшихся
   языков. Без popup.

   Анатомия:
     <div class="lr-stack">
       <div class="field"><span class="field-lang is-master" title="Русский · основной язык">RU</span><input ...></div>
       <div class="field"><span class="field-lang" title="English">EN</span><input ...></div>
       <button class="lr-add">+ Добавить перевод</button>
       <div class="lr-picker hidden">
         <button class="lr-pick">UK</button>
         <button class="lr-pick">SK</button>
         …
       </div>
     </div>

   Disabled state .lr-add[disabled] — мастер-язык не заполнен (V2).
*/
.lr-stack{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.lr-stack > .field{width:100%}
.lr-add{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px dashed var(--border-strong);border-radius:var(--radius-md);height:30px;padding:0 12px;color:var(--muted-fg);font:500 .846rem/1 var(--font-sans);cursor:pointer;margin-top:2px;transition:all var(--motion-fast) var(--motion-ease)}
.lr-add:hover:not(:disabled){color:var(--foreground);border-color:var(--muted-fg)}
.lr-add:disabled{opacity:.45;cursor:not-allowed}
.lr-add .i{width:12px;height:12px}
.lr-picker{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md)}
.lr-picker .lr-picker-lbl{font-size:.769rem;color:var(--muted-fg);margin-right:4px}
.lr-pick{display:inline-flex;align-items:center;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-sm);height:24px;padding:0 8px;font-family:var(--font-mono);font-size:.769rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-fg);cursor:pointer;transition:all var(--motion-fast) var(--motion-ease)}
.lr-pick:hover{color:var(--primary);border-color:var(--primary)}

/* Validation states */
.lr-stack.is-invalid > .field:first-child{border-color:var(--danger)}
.lr-stack.is-invalid > .field:first-child:focus-within{box-shadow:var(--shadow-focus-danger)}
.lr-err{font-size:.846rem;color:var(--danger);margin-top:4px;display:flex;align-items:center;gap:6px}
.lr-err .i{width:13px;height:13px;flex:none}

/* Live demo — hover-reveal remove button on translation rows */
.lr-row{display:flex;align-items:center;gap:6px;position:relative}
.lr-row > .field{flex:1;min-width:0}
.lr-rm{
  flex:none;appearance:none;border:1px solid transparent;background:transparent;cursor:pointer;
  width:30px;height:30px;border-radius:var(--radius-md);color:var(--muted-fg);
  display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .12s,color .12s,background .12s,border-color .12s;
}
.lr-row:hover .lr-rm,.lr-row:focus-within .lr-rm,.lr-rm:focus-visible{opacity:1}
.lr-rm:hover{color:var(--danger);background:color-mix(in oklch,var(--danger) 8%,transparent);border-color:color-mix(in oklch,var(--danger) 22%,transparent)}
.lr-rm:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.lr-rm .i{width:14px;height:14px}

/* Inline add-bar: button + picker in one highlighted row */
.lr-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:4px;margin-top:4px;border-radius:var(--radius-md);
  background:transparent;transition:background .15s,box-shadow .15s;
}
.lr-bar.is-open{background:color-mix(in oklch,var(--primary) 7%,transparent)}
.lr-bar > .lr-add{margin-top:0;flex:none}
.lr-bar.is-open > .lr-add{
  color:var(--primary);border-color:color-mix(in oklch,var(--primary) 45%,transparent);
  border-style:solid;background:var(--surface);
}
.lr-bar-picks{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.lr-bar .lr-pick{margin:0}
.lr-bar .lr-pick.is-selected{
  opacity:.4;cursor:default;pointer-events:none;
  background:transparent;color:var(--muted-fg);border-color:var(--border-subtle);
}

/* ---- LangTabs ----
   Контекст-переключатель языка для переводимого контента (название песни,
   шаблон уведомления, описание курса). Визуально — toggle-group на
   surface-2 с активным табом на surface-1. Код языка — mono, uppercase.
   Master-язык: .lt-tab.is-master (primary + bolder). Состояние
   заполненности перевода — .lt-dot (success=заполнено, warning=draft,
   empty=пусто с inset border). Полное название языка — всегда в
   title-атрибуте, для master с суффиксом « · основной язык».

   Анатомия:
     <div class="lt-tabs" role="tablist">
       <button class="lt-tab on is-master" title="Русский · основной язык">
         <span class="lt-code">RU</span>
       </button>
       <button class="lt-tab" title="English">
         <span class="lt-code">EN</span>
         <span class="lt-dot is-draft"></span>
       </button>
       <button class="lt-tab" title="Українська">
         <span class="lt-code">UK</span>
         <span class="lt-dot is-empty"></span>
       </button>
     </div>

   Применение: T1 (в шапке секции, справа от заголовка). Без флагов.
*/
.lt-tabs{display:inline-flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;cursor:default}
.lt-tab{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:5px 10px;font:500 .846rem/1 var(--font-sans);color:var(--muted-fg);border-radius:calc(var(--radius-md) - 4px);cursor:pointer;font-variant-numeric:tabular-nums;transition:background var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)}
.lt-tab:hover:not(.on){color:var(--foreground)}
.lt-tab.on{background:var(--surface-1);color:var(--foreground);box-shadow:var(--shadow-xs)}
.lt-tab .lt-code{font-family:var(--font-mono);font-size:.769rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.lt-tab.is-master .lt-code{color:var(--primary);font-weight:700}
.lt-tab .lt-dot{width:5px;height:5px;border-radius:999px;background:var(--success);flex:none;display:inline-block}
.lt-tab .lt-dot.is-draft{background:var(--warning)}
.lt-tab .lt-dot.is-empty{background:transparent;box-shadow:inset 0 0 0 1px var(--border-strong)}
.lt-tab:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

/* ---- Textarea: sizes · counter · autogrow ---- */
.field-ta.field-ta-sm{font-size:.923rem}
.field-ta.field-ta-sm textarea{padding:6px 0;min-height:56px;font-size:.923rem}
.field-ta textarea{min-height:72px}
.field-ta.field-ta-lg textarea{min-height:120px;font-size:1.077rem}
.field-ta-count{display:flex;justify-content:flex-end;font-size:.769rem;color:var(--muted-fg);font-variant-numeric:tabular-nums;margin-top:4px;visibility:hidden;transition:opacity var(--motion-fast) var(--motion-ease)}
.field-ta-count.is-near,.field-ta-count.is-over{visibility:visible}
.field-ta-count.is-near{color:var(--warning-fg,var(--amber-700))}
.field-ta-count.is-over{color:var(--danger)}
/* Autogrow via grid trick. Wrapper .field-ta-grow contains the
   .field-ta and mirrors content via data-replicated-value on a sibling. */
.field-ta-grow{display:grid}
.field-ta-grow::after{content:attr(data-replicated-value) " ";white-space:pre-wrap;visibility:hidden;grid-area:1/1/2/2;padding:8px 10px;font:inherit;line-height:1.5}
.field-ta-grow > .field{grid-area:1/1/2/2}

/* ---- Segmented control ----
   Base used in peek/dashboard/settings inline. Atomized here as
   .seg (equal-width implicit via content) and .seg-fw (full-width,
   grid flex:1). Sizes: default 28h, .seg-sm 24h, .seg-lg 32h.
*/
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:2px;height:28px;align-items:stretch}
.seg > button{flex:none;background:transparent;border:0;cursor:pointer;padding:0 12px;font:500 .846rem/1 var(--font-sans);color:var(--muted-fg);border-radius:calc(var(--radius-md) - 3px);display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:auto;transition:all var(--motion-fast) var(--motion-ease)}
.seg > button .i{width:13px;height:13px}
.seg > button:hover:not(.on):not(:disabled){color:var(--foreground)}
.seg > button.on{background:var(--surface-1);color:var(--foreground);box-shadow:var(--shadow-xs);font-weight:500}
.seg > button:disabled{opacity:.4;cursor:not-allowed}
.seg > button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.seg-sm{height:24px}
.seg-sm > button{padding:0 10px;font-size:.769rem}
.seg-lg{height:32px}
.seg-lg > button{padding:0 14px;font-size:.923rem}
.seg-fw{display:flex;width:100%}
.seg-fw > button{flex:1}
.seg-eq > button{min-width:60px}
.seg.is-invalid{border-color:var(--danger)}

/* ---- Weekday picker: square toggles ---- */
.seg-wd{display:inline-flex;gap:4px}
.seg-wd > button{width:32px;height:32px;border:1px solid var(--border-strong);background:var(--surface-1);color:var(--muted-fg);border-radius:var(--radius-md);font:500 .846rem/1 var(--font-sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all var(--motion-fast) var(--motion-ease)}
.seg-wd > button:hover:not(.on):not(:disabled){border-color:var(--muted-fg);color:var(--foreground)}
.seg-wd > button.on{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.seg-wd > button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.seg-wd > button:disabled{opacity:.4;cursor:not-allowed}
.seg-wd-sm > button{width:28px;height:28px;font-size:.769rem}

/* ---- Number stepper: − value + ---- */
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-1);height:36px;overflow:hidden}
.stepper > button{width:32px;border:0;background:transparent;color:var(--muted-fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast) var(--motion-ease);flex:none}
.stepper > button:hover:not(:disabled){background:var(--surface-3);color:var(--foreground)}
.stepper > button:disabled{opacity:.35;cursor:not-allowed}
.stepper > button .i{width:14px;height:14px}
.stepper > button:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:0}
.stepper > input{flex:1;min-width:64px;width:72px;text-align:center;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);background:transparent;font:500 1rem/1 var(--font-sans);color:var(--foreground);padding:0 10px;outline:none;font-variant-numeric:tabular-nums}
.stepper > input::-webkit-outer-spin-button,
.stepper > input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper > input[type=number]{-moz-appearance:textfield}
.stepper:focus-within{border-color:var(--ring);box-shadow:var(--shadow-focus)}
.stepper-sm{height:28px}
.stepper-sm > button{width:26px}
.stepper-sm > input{font-size:.923rem;min-width:52px;width:60px;padding:0 8px}
.stepper-sm > button .i{width:12px;height:12px}
.stepper-lg{height:44px}
.stepper-lg > button{width:40px}
.stepper-lg > input{font-size:1.077rem;min-width:80px;width:88px;padding:0 12px}
.stepper.is-invalid{border-color:var(--danger)}

/* ---- Stepper row: stepper + external unit label ----
   Юнит — самостоятельный текст рядом со stepper'ом, не внутри.
   Дефолтом справа (мин, BPM, нед.). Парные (от … до … мин) —
   несколько .unit в одном row. Юнит центрируется по вертикали
   со stepper'ом и использует чуть более плотный вес, чтобы
   читаться как связанный, а не болтающийся снаружи текст. */
.stepper-row{display:inline-flex;align-items:stretch;gap:6px}
.stepper-row .unit{display:inline-flex;align-items:center;color:var(--muted-fg);font:500 .923rem/1 var(--font-sans);white-space:nowrap;min-height:36px}
.stepper-row:has(.stepper-sm) .unit{font-size:.846rem;min-height:28px}
.stepper-row:has(.stepper-lg) .unit{font-size:1rem;min-height:44px}

/* ================================================================
   DATE / TIME — field wrappers + DatePicker popup
   ----------------------------------------------------------------
   Три публичных атома:

   .field-date   — обёртка над <input type="date"> с lucide-иконкой
                   слева. Native picker-indicator спрятан, тап по
                   всему полю открывает нативный календарь.

   .field-time   — то же для <input type="time"> (24h).

   .field-datepart — CUSTOM trigger для смешанного дня рождения,
                   периода и т.п., когда известен только месяц или
                   только год. Кастомный popup — см. .dpk-* ниже.

   DatePicker popup (.dpk) — самостоятельный atom, раскрывается
   под любым из триггеров выше (или из .field-datepart). Три
   режима точности: Дата · Месяц · Год. Переключение через
   segmented наверху popup'а.
   ================================================================ */

/* ---- .field-date / .field-time (обёртки над .field) ---- */
.field-date,
.field-time{position:relative}
.field-date > .field-lead,
.field-time > .field-lead{color:var(--muted-fg)}
.field-date > .field-lead .i,
.field-time > .field-lead .i{width:16px;height:16px}
.field-date > input[type=date],
.field-time > input[type=time]{
  font-variant-numeric:tabular-nums;
  /* скрыть placeholder когда поле пустое в WebKit */
  color:var(--foreground);
}
.field-date > input[type=date]::-webkit-calendar-picker-indicator,
.field-time > input[type=time]::-webkit-calendar-picker-indicator{
  /* спрятать нативный индикатор — наша lucide-иконка слева делает работу */
  opacity:0;
  position:absolute;inset:0;width:100%;height:100%;
  cursor:pointer;
}
.field-date > input[type=date]::-webkit-date-and-time-value,
.field-time > input[type=time]::-webkit-date-and-time-value{text-align:left}
/* placeholder-поведение для пустого native date в Firefox/Safari */
.field-date > input[type=date]:not(:focus):invalid,
.field-date > input[type=date]:not(:focus):placeholder-shown{color:var(--muted-fg)}

/* ---- .field-datepart (custom trigger — выглядит как field, но <button>) ---- */
.field-datepart{cursor:pointer;user-select:none}
.field-datepart > .dpk-val{flex:1;min-width:0;color:var(--foreground);font-variant-numeric:tabular-nums;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field-datepart > .dpk-val.is-placeholder{color:var(--muted-fg)}
.field-datepart > .field-trail{color:var(--muted-fg);margin-left:auto}
.field-datepart > .field-trail .i{width:16px;height:16px}

/* ================================================================
   DatePicker popup (.dpk)
   ================================================================ */
.dpk{
  width:296px;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:12px;
  font-size:.923rem;
  color:var(--foreground);
  user-select:none;
}
.dpk-head{
  display:flex;align-items:center;gap:4px;
  margin-bottom:8px;
}
.dpk-head .dpk-title{
  flex:1;
  display:inline-flex;align-items:center;gap:6px;
  font-weight:500;font-size:.923rem;
  background:transparent;border:0;cursor:pointer;
  padding:6px 8px;border-radius:var(--radius-sm);
  color:var(--foreground);
  text-align:left;
}
.dpk-head .dpk-title:hover{background:var(--surface-2)}
.dpk-head .dpk-title .i{width:12px;height:12px;color:var(--muted-fg)}
.dpk-head .dpk-nav{
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  border-radius:var(--radius-sm);
  color:var(--muted-fg);
}
.dpk-head .dpk-nav:hover{background:var(--surface-2);color:var(--foreground)}
.dpk-head .dpk-nav .i{width:16px;height:16px}

/* --- Mode switcher (Дата / Месяц / Год) --- */
.dpk-modes{margin-bottom:12px}

/* --- Weekday labels --- */
.dpk-wd{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:2px;margin-bottom:4px;
}
.dpk-wd > span{
  text-align:center;
  font-size:.769rem;font-weight:500;
  color:var(--muted-fg);
  padding:4px 0;
  text-transform:lowercase;
}

/* --- Day grid --- */
.dpk-days{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:2px;
}
.dpk-day{
  aspect-ratio:1;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  border-radius:var(--radius-sm);
  font-size:.923rem;font-variant-numeric:tabular-nums;
  color:var(--foreground);
  transition:background var(--motion-fast) var(--ease);
}
.dpk-day:hover:not(:disabled):not(.is-selected){background:var(--surface-2)}
.dpk-day.is-muted{color:var(--muted-fg);opacity:.5}
.dpk-day.is-today:not(.is-selected){
  background:var(--surface-3);
  font-weight:600;
  box-shadow:inset 0 0 0 1px var(--border-strong);
}
.dpk-day.is-selected{
  background:var(--primary);
  color:var(--primary-foreground);
  font-weight:500;
}
.dpk-day.is-range{background:color-mix(in oklch,var(--primary) 14%,transparent);color:var(--foreground);border-radius:0}
.dpk-day.is-range-start{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}
.dpk-day.is-range-end{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}
/* out-of-month days inside range: keep fill, dim text only */
.dpk-day.is-muted.is-range{opacity:1;color:color-mix(in oklch,var(--foreground) 45%,transparent)}
.dpk-day:disabled{opacity:.3;cursor:not-allowed}
.dpk-day:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* --- Month grid (4×3) --- */
.dpk-months{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:4px;
  padding:4px 0;
}
.dpk-month{
  height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  border-radius:var(--radius-sm);
  font-size:.923rem;
  color:var(--foreground);
}
.dpk-month:hover:not(.is-selected){background:var(--surface-2)}
.dpk-month.is-today:not(.is-selected){background:var(--surface-2);font-weight:600}
.dpk-month.is-selected{background:var(--primary);color:var(--primary-foreground);font-weight:500}

/* --- Year grid (4×3, decade view) --- */
.dpk-years{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:4px;
  padding:4px 0;
}
.dpk-year{
  height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
  border-radius:var(--radius-sm);
  font-size:.923rem;font-variant-numeric:tabular-nums;
  color:var(--foreground);
}
.dpk-year:hover:not(.is-selected){background:var(--surface-2)}
.dpk-year.is-muted{color:var(--muted-fg);opacity:.5}
.dpk-year.is-today:not(.is-selected){background:var(--surface-2);font-weight:600}
.dpk-year.is-selected{background:var(--primary);color:var(--primary-foreground);font-weight:500}

/* --- Footer --- */
.dpk-foot{
  margin-top:8px;padding-top:8px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
}
.dpk-foot .dpk-today{
  background:transparent;border:0;cursor:pointer;
  padding:6px 8px;border-radius:var(--radius-sm);
  font-size:.846rem;color:var(--muted-fg);
}
.dpk-foot .dpk-today:hover{background:var(--surface-2);color:var(--foreground)}
.dpk-foot .dpk-clear{
  margin-left:auto;
  background:transparent;border:0;cursor:pointer;
  padding:6px 8px;border-radius:var(--radius-sm);
  font-size:.846rem;color:var(--muted-fg);
  display:inline-flex;align-items:center;gap:4px;
}
.dpk-foot .dpk-clear:hover{background:var(--surface-2);color:var(--danger)}
.dpk-foot .dpk-clear .i{width:12px;height:12px}

/* --- Compact variant (для datepart popup когда режим = Год) --- */
.dpk-compact{width:248px}
.dpk-compact .dpk-years{grid-template-columns:repeat(3,1fr)}

/* --- Range variant (two months side by side) --- */
.dpk-range{width:auto;display:flex;gap:16px;padding:12px}
.dpk-range .dpk-col{width:272px}
.dpk-range .dpk-preset-col{
  width:140px;
  border-right:1px solid var(--border);
  padding-right:16px;
  margin-right:0;
  display:flex;flex-direction:column;gap:2px;
}
.dpk-range .dpk-preset-col button{
  background:transparent;border:0;cursor:pointer;
  padding:6px 10px;border-radius:var(--radius-sm);
  font-size:.846rem;color:var(--foreground);text-align:left;
}
.dpk-range .dpk-preset-col button:hover{background:var(--surface-2)}
.dpk-range .dpk-preset-col button.is-active{background:var(--surface-2);font-weight:500}

/* --- TimePicker inline (optional, under .field-time) --- */
.dpk-time{
  padding:12px;
  display:flex;align-items:center;gap:8px;
  background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  width:fit-content;
}
.dpk-time .dpk-time-col{
  display:flex;flex-direction:column;
  height:180px;overflow-y:auto;
  scroll-snap-type:y mandatory;
  scrollbar-width:thin;
}
.dpk-time .dpk-time-col button{
  flex:none;
  background:transparent;border:0;cursor:pointer;
  padding:6px 12px;border-radius:var(--radius-sm);
  font-size:.923rem;font-variant-numeric:tabular-nums;
  color:var(--foreground);text-align:center;
  scroll-snap-align:center;
}
.dpk-time .dpk-time-col button:hover{background:var(--surface-2)}
.dpk-time .dpk-time-col button.is-selected{background:var(--primary);color:var(--primary-foreground);font-weight:500}
.dpk-time .dpk-time-sep{color:var(--muted-fg);font-weight:500;align-self:center}


/* ================================================================
   PILL FAMILY — общий базовый класс
   ----------------------------------------------------------------
   .pill — канонический атом Pill-семейства: Badge · Chip ·
   StatusPill · DeltaChip. Размеры (sm/md/lg), радиус и тоновая
   схема — через токены --pill-* (см. override-блок выше).

   Старые классы (.bdg, .chip, .sp, .delta) сохранены как есть,
   чтобы не ломать Phase 2/3 экраны (в т.ч. замороженный dashboard).
   Они визуально совместимы с .pill md: height 20-24px, radius 999,
   fs .769-.846rem, border color-mix(... 22%) — одна схема.

   Использование: <span class="pill pill-tone-primary">…</span>
   Для StatusPill: <span class="pill pill-tone-success"><i class="d"></i>Active</span>
   Для DeltaChip: <span class="pill pill-sm pill-tone-success"><svg class="i">…</svg>+12%</span>
   ================================================================ */
.pill{
  display:inline-flex;align-items:center;gap:var(--pill-gap);
  height:var(--pill-h-md);padding:var(--pill-pad-md);
  border-radius:var(--pill-radius);
  font-size:var(--pill-fs-md);font-weight:500;line-height:1.2;
  white-space:nowrap;
  border:var(--pill-border) solid transparent;
  font-variant-numeric:tabular-nums;
  --c:var(--muted-fg);
}
.pill-sm{height:var(--pill-h-sm);padding:var(--pill-pad-sm);font-size:var(--pill-fs-sm);gap:4px}
.pill-lg{height:var(--pill-h-lg);padding:var(--pill-pad-lg);font-size:var(--pill-fs-lg)}
.pill .d{width:var(--pill-dot);height:var(--pill-dot);border-radius:999px;background:var(--c);flex:none}
.pill .i{width:12px;height:12px;flex:none}
.pill-lg .i{width:14px;height:14px}
.pill-sm .i{width:10px;height:10px}
.pill[disabled],.pill.is-disabled{opacity:.5;pointer-events:none}

/* Tonal variants — default = soft fill + soft border + tone fg.
   Совпадают со схемой .bdg-soft / .sp / .chip.is-sel.
   На всех вариантах действует единый --c → цвет bg/border/fg через color-mix. */
.pill-tone-neutral{background:var(--surface-2);color:var(--muted-fg);border-color:var(--border);--c:var(--muted-fg)}
.pill-tone-primary{--c:var(--primary)}
.pill-tone-success{--c:var(--green-700)}
.pill-tone-warning{--c:var(--amber-700)}
.pill-tone-danger {--c:var(--red-600)}
.pill-tone-info   {--c:var(--blue-600)}
.pill-tone-violet {--c:var(--violet-700)}
/* Apply soft-fill формулу ко всем tonal'ам, кроме neutral (там свои сплошные токены). */
.pill-tone-primary,
.pill-tone-success,
.pill-tone-warning,
.pill-tone-danger,
.pill-tone-info,
.pill-tone-violet{
  background:color-mix(in oklch,var(--c) var(--pill-tone-bg),transparent);
  color:var(--c);
  border-color:color-mix(in oklch,var(--c) var(--pill-tone-border),transparent);
}
/* Dark mode — подтягиваем тоны на 1-2 ступени ярче, как уже делают .sp-active/.delta-up */
html.dark .pill-tone-success{--c:oklch(.780 .165 160.5)}
html.dark .pill-tone-warning{--c:oklch(.800 .180 75)}
html.dark .pill-tone-danger {--c:oklch(.780 .180 25)}
html.dark .pill-tone-info   {--c:oklch(.780 .170 258)}
html.dark .pill-tone-violet {--c:oklch(.780 .170 303)}

/* Solid variant — противоположность soft: fg белый, bg = сплошной tone.
   Для count-бейджей, критических badge-меток, active-тумблеров. */
.pill-solid{background:var(--c);color:#fff;border-color:var(--c)}
.pill-solid.pill-tone-warning{color:var(--gray-950)}   /* на amber белый не читается */

/* Outline variant — прозрачный fill, только border + fg. */
.pill-outline{background:transparent;color:var(--c);border-color:color-mix(in oklch,var(--c) 40%,transparent)}

/* Count shorthand — круглый счётчик (sidebar badges, inbox).
   Геометрия как pill-sm, но квадратная (height == min-width). */
.pill-count{min-width:var(--pill-h-sm);height:var(--pill-h-sm);padding:0 5px;justify-content:center;font-variant-numeric:tabular-nums;font-size:var(--pill-fs-sm)}

/* Interactive — hover/focus на кликабельных pill'ах (.chip, filter-chip). */
.pill-interactive{cursor:pointer;transition:background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}
.pill-interactive:hover{background:color-mix(in oklch,var(--c) 20%,transparent);border-color:color-mix(in oklch,var(--c) 30%,transparent)}
.pill-interactive:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ---- Badge ---- */
.bdg{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:.769rem;font-weight:500;line-height:1.4;white-space:nowrap;--c:var(--muted-fg)}
.bdg .d{width:6px;height:6px;border-radius:999px;background:var(--c)}
.bdg-soft{background:color-mix(in oklch,var(--c) 14%,transparent);color:var(--c)}
.bdg-solid{background:var(--c);color:#fff}
.bdg-outline{background:transparent;color:var(--c);border:1px solid color-mix(in oklch,var(--c) 40%,transparent)}
.bdg-count{min-width:18px;height:18px;padding:0 5px;background:var(--muted);color:var(--foreground);font-variant-numeric:tabular-nums;justify-content:center}
.bdg-count.bdg-accent{background:var(--primary);color:var(--primary-fg)}

/* ---- DeltaChip ----
   Числовая дельта со стрелкой (KPI-тайлы, trend-cells). Тон определяется
   классом состояния (up/down/neutral). Цвет — через var(--c), так же
   как badge/chip: единый паттерн color-mix soft-fill. */
.delta{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:999px;font-size:.769rem;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;background:color-mix(in oklch,var(--c) 12%,transparent);color:var(--c);--c:var(--muted-fg)}
.delta .i{width:10px;height:10px;stroke-width:2.5}
.delta-up{--c:var(--green-700)}
.delta-down{--c:var(--red-600)}
.delta-flat{--c:var(--muted-fg)}
html.dark .delta-up{--c:oklch(.78 .18 160)}
html.dark .delta-down{--c:oklch(.78 .18 25)}
/* Subtle variant — без фона, только цвет + стрелка (для inline-использования в таблицах) */
.delta-plain{background:transparent;padding:0;gap:2px}
/* Large variant — для KPI-тайлов, крупнее */
.delta-md{font-size:.846rem;padding:2px 8px}
.delta-md .i{width:11px;height:11px}

/* ---- DatePill ----
   Компактный 2-строчный date-маркер: число + месяц (uppercase).
   Used in: event rows, birthday lists, любые плотные таблицы, где
   нужно место для даты в 40-52px. Канонический якорь для строки
   списка — всегда слева, как ev-when/bd-when.
   Отличие от `.dc` (DateChip): меньше, без weekday, заливка = surface-2
   (а не surface-1) — чтобы «сидеть» внутри строки, а не парить карточкой. */
.date-pill{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:40px;flex:none;text-align:center;line-height:1;
  padding:4px 6px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.date-pill .d{
  font-size:.923rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--foreground);
  letter-spacing:-.01em;
}
.date-pill .m{
  font-size:.769rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-fg);margin-top:2px;white-space:nowrap;
}
/* Today — primary tint, ярче */
.date-pill-today{
  background:color-mix(in oklch,var(--primary) 12%,transparent);
  border-color:color-mix(in oklch,var(--primary) 30%,transparent);
}
.date-pill-today .d,
.date-pill-today .m{color:var(--primary)}
/* Past — приглушённый */
.date-pill-past{opacity:.55}
/* Upcoming — лёгкий акцент */
.date-pill-soon{
  border-color:color-mix(in oklch,var(--primary) 25%,transparent);
}
/* Size sm — для очень плотных списков */
.date-pill-sm{min-width:34px;padding:2px 5px}
.date-pill-sm .d{font-size:.846rem}
.date-pill-sm .m{font-size:.692rem}
/* Accent — month в primary (лёгкий брендинг без full tint) */
.date-pill-accent .m{color:var(--primary)}

/* ---- DateChip ----
   Крупный 3-строчный date-блок: month (primary) / day (крупно) / weekday.
   Used in: event detail hero, крупные карточки с датой как заголовком.
   Отличие от DatePill: больше, с weekday, month в primary цвете, парит
   на surface-1 (pill сидит на surface-2). DC — про «дата это заголовок»;
   pill — про «дата это ярлык строки».
   Варианты: today (full primary fill), soon (tint), past (opacity). */
.dc{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;padding:6px 8px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);line-height:1;text-align:center}
.dc .m{font-size:.769rem;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.dc .d{font-size:1.385rem;font-weight:600;color:var(--foreground);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dc .w{font-size:.769rem;color:var(--muted-fg);margin-top:3px;text-transform:uppercase;letter-spacing:.04em}
.dc-today{background:var(--primary);border-color:var(--primary)}
.dc-today .m,.dc-today .d,.dc-today .w{color:var(--primary-fg)}
.dc-soon{border-color:color-mix(in oklch,var(--primary) 40%,transparent);background:color-mix(in oklch,var(--primary) 6%,var(--surface-1))}
.dc-past{opacity:.55}
.dc-past .m{color:var(--muted-fg)}

/* ---- Avatar ---- */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:#fff;font-weight:600;flex:none;background:linear-gradient(135deg,var(--g1,#6366F1),var(--g2,#3B82F6));overflow:hidden}
.av-xs{width:20px;height:20px;font-size:.769rem}
.av-sm{width:24px;height:24px;font-size:.846rem}
.av-md{width:32px;height:32px;font-size:.923rem}
.av-lg{width:40px;height:40px;font-size:1.077rem}
.av-xl{width:56px;height:56px;font-size:1.385rem}
.av-g1{--g1:oklch(.72 .17 180);--g2:oklch(.55 .18 200)}
.av-g2{--g1:oklch(.75 .16 45);--g2:oklch(.58 .19 25)}
.av-g3{--g1:oklch(.73 .17 140);--g2:oklch(.55 .18 160)}
.av-g4{--g1:oklch(.74 .17 300);--g2:oklch(.55 .22 290)}
.av-g5{--g1:oklch(.74 .15 85);--g2:oklch(.58 .17 65)}
.av-group{display:inline-flex;--stack-overlap:6px}
.av-group .av{box-shadow:0 0 0 2px var(--surface-1);margin-left:calc(-1 * var(--stack-overlap))}
.av-group .av:first-child{margin-left:0}
.av-group.av-group-tight{--stack-overlap:8px}
.av-group.av-group-loose{--stack-overlap:4px}
.av-more{background:var(--muted)!important;color:var(--muted-fg)!important}

/* ---- Tooltip + Kbd ---- */
.tt{position:relative;display:inline-flex;align-items:center}
.tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--gray-900);color:var(--gray-50);padding:6px 10px;border-radius:var(--radius-md);font-size:.846rem;white-space:nowrap;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow-lg);pointer-events:none}
html.dark .tip{background:var(--gray-800)}
.tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--gray-900)}
html.dark .tip::after{border-top-color:var(--gray-800)}
.tip .kbd{background:rgb(255 255 255 /.14);color:inherit;border:1px solid rgb(255 255 255 /.1)}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;font-family:var(--font-mono);font-size:.769rem;font-weight:500;line-height:1;background:var(--muted);color:var(--muted-fg);border:1px solid var(--border);border-radius:var(--radius-sm);border-bottom-width:2px}

/* ---- Chip (tag/filter pill with optional remove) ---- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:var(--muted);color:var(--foreground);border:1px solid var(--border);border-radius:999px;font-size:.846rem;font-weight:500;cursor:pointer;transition:background var(--motion-fast) var(--motion-ease);--c:var(--muted-fg)}
.chip:hover{background:var(--surface-3)}
.chip .d{width:6px;height:6px;border-radius:999px;background:var(--c)}
.chip.is-sel{background:color-mix(in oklch,var(--c) 14%,transparent);border-color:color-mix(in oklch,var(--c) 30%,transparent);color:var(--c)}
.chip-x{background:transparent;border:0;cursor:pointer;padding:2px;border-radius:999px;color:inherit;opacity:.6;display:flex}
.chip-x:hover{opacity:1;background:rgb(0 0 0 /.08)}
.chip-x .i{width:10px;height:10px}
.chip-add{background:transparent;border:1px dashed var(--border-strong);color:var(--muted-fg)}
.chip-add:hover{background:var(--muted);color:var(--foreground);border-style:solid}
.chip-add .i{width:12px;height:12px}

/* ---- Skeleton ---- */
.skel{background:linear-gradient(90deg,var(--muted) 0%,var(--surface-3) 50%,var(--muted) 100%);background-size:200% 100%;border-radius:var(--radius-sm);animation:shm 1.6s linear infinite}
@keyframes shm{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-text{height:12px;border-radius:3px}
.skel-av{border-radius:999px}
.skel-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.skel-row:last-child{border-bottom:0}

/* ---- Callout ----
   Информативный блок «полезно знать, но делать ничего не надо».
   Icon + title (опц.) + text. Цвет по тону: info (default, sky),
   success, warning, danger. Для danger/warning поверх подложки
   можно добавить CTA — через .btn внутри.

   Использование: inline в формах, в шапках секций, в onboarding. */
.callout{
  display:grid;grid-template-columns:auto 1fr;gap:10px;
  padding:12px 14px;
  background:color-mix(in oklch,var(--c) 8%,var(--surface-1));
  border:1px solid color-mix(in oklch,var(--c) 30%,transparent);
  border-radius:var(--radius-lg);
  font-size:.923rem;line-height:1.45;
  --c:var(--sem-info);
  color:var(--foreground);
}
.callout-ic{color:var(--c);display:flex;align-items:flex-start;padding-top:1px}
.callout-ic .i{width:16px;height:16px;flex:none}
.callout-body{min-width:0}
.callout-title{font-weight:600;margin-bottom:2px;color:var(--c)}
.callout-body p{margin:0}
.callout-body p+p{margin-top:6px}
.callout-info{--c:var(--sem-info)}
.callout-success{--c:var(--green-700)}
.callout-warning{--c:var(--amber-600,oklch(.65 .18 70))}
.callout-danger{--c:var(--red-600)}
html.dark .callout-success{--c:oklch(.78 .18 160)}
html.dark .callout-warning{--c:oklch(.80 .18 75)}
html.dark .callout-danger{--c:oklch(.78 .18 25)}

/* ---- FieldHint ----
   Подпись-подсказка под полем формы. По умолчанию info-тон (sky),
   чтобы отличаться от .err (danger) и от muted-paragraph-текста.
   Рядом с полем, size < label. */
.hint{
  display:flex;align-items:flex-start;gap:6px;
  font-size:.846rem;line-height:1.4;
  color:var(--sem-info);
  margin-top:4px;
}
html.dark .hint{color:oklch(.78 .14 235)}
.hint .i{width:12px;height:12px;flex:none;margin-top:2px}
.hint-muted{color:var(--muted-fg)}
html.dark .hint-muted{color:var(--muted-fg)}

/* ---- InfoIcon ----
   Маленькая (i) рядом с label, title или value — говорит «здесь
   есть подсказка на hover». Всегда sky-info, размер 12-14px,
   opacity .7. Оборачивать в .tt для tooltip-а. */
.info-ic{display:inline-flex;vertical-align:middle;color:var(--sem-info);opacity:.75;cursor:help;transition:opacity var(--motion-fast) var(--motion-ease)}
.info-ic:hover{opacity:1}
.info-ic .i{width:12px;height:12px}
html.dark .info-ic{color:oklch(.78 .14 235)}

/* ---- Breadcrumb ----
   Строка навигации для шапки страницы: a › a › b.
   Последний сегмент — bold foreground, предыдущие — muted-fg,
   separator через ›/chevron. Используется в .ph и других шапках. */
.bc{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.769rem;color:var(--muted-fg);line-height:1.4}
.bc a,.bc b,.bc span:not(.sep){white-space:nowrap}
.bc a{color:var(--muted-fg);text-decoration:none;transition:color var(--motion-fast) var(--motion-ease)}
.bc a:hover{color:var(--foreground)}
.bc .sep{opacity:.4;display:inline-flex;align-items:center}
.bc b{color:var(--foreground);font-weight:500}

/* ---- PageStatRow ----
   Grid 1fr×N, ячейка = label / value / delta-chip.
   Используется под заголовком страницы (контакт, событие, группа).
   Визуально: border-top + column separators, не рамка. */
.ph-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface-1)}
.ph-stats .ph-stat{padding:14px 20px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px;min-width:0}
.ph-stats .ph-stat:last-child{border-right:0}
.ph-stats .ph-stat .l{font-size:.769rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-fg);font-weight:600;font-family:var(--font-mono)}
.ph-stats .ph-stat .v{font-size:1.385rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--foreground);display:flex;align-items:baseline;gap:6px}
.ph-stats .ph-stat .v.ok{color:var(--green-700)}
.ph-stats .ph-stat .v.warn{color:var(--amber-700)}
.ph-stats .ph-stat .v.danger{color:var(--red-600)}
.ph-stats .ph-stat .delta{font-size:.846rem;font-weight:500;font-family:var(--font-mono)}
.ph-stats .ph-stat .delta.up{color:var(--green-700)}
.ph-stats .ph-stat .delta.down{color:var(--red-600)}
.ph-stats-3{grid-template-columns:repeat(3,1fr)}
.ph-stats-2{grid-template-columns:repeat(2,1fr)}
.ph-stats-5{grid-template-columns:repeat(5,1fr)}

/* ---- TabsRow ----
   Горизонтальные табы с underline-активным и опц. count-чипом.
   Используется в шапке страницы и внутри панелей. */
.tabs-row{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs-row::-webkit-scrollbar{display:none}
.tabs-row .tab{background:transparent;border:0;cursor:pointer;font-family:inherit;padding:10px 14px;font-size:.923rem;color:var(--muted-fg);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color var(--motion-fast) var(--motion-ease)}
.tabs-row .tab .c{font-size:.846rem;font-family:var(--font-mono);background:var(--muted);padding:1px 6px;border-radius:999px;color:var(--muted-fg);font-variant-numeric:tabular-nums}
.tabs-row .tab.on{color:var(--primary);border-color:var(--primary)}
.tabs-row .tab.on .c{background:color-mix(in oklch,var(--primary) 16%,transparent);color:var(--primary)}
.tabs-row .tab:hover:not(.on){color:var(--foreground)}

/* ================================================================
   MOLECULES
   ================================================================ */

/* ---- PropertyRow ----
   Ряд для правой панели контакта/детали.
   Grid: label 140px / value 1fr / actions 56px (фиксированная колонка).

   Стабильность сетки: actions-колонка резервирует место всегда — это
   главное отличие от «hover меняет grid-template». Иначе при hover
   колонка auto меняет размер, 1fr сжимается, значения визуально
   прыгают вправо/вёрстка «дышит». Здесь колонка фиксирована,
   прячется только контент кнопок через visibility — место сохраняется.

   Высота строк стабильна: фон и бордер не меняют размеры на hover,
   нет переключения display/padding на корне .prop.

   Варианты:
   - default     — 44px min-height, padding 10/16
   - prop-compact — для плотных side peek (min-height 36px, padding 6/14)
*/
.plist{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;max-width:560px}
.plist.plist-inline{background:transparent;border:0;border-radius:0;max-width:none}
.prop{display:grid;grid-template-columns:140px minmax(0,1fr) 56px;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);min-height:44px}
.prop:last-child{border-bottom:0}
.prop:hover{background:var(--surface-3)}
.prop:focus-within{background:var(--surface-3)}
.prop .lbl{display:flex;align-items:center;gap:8px;color:var(--muted-fg);font-size:.923rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prop .lbl .i{width:14px;height:14px;flex:none;opacity:.75}
.prop .val{color:var(--foreground);font-size:.923rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prop .val.empty{color:var(--muted-fg)}
.prop .val.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.prop .val a{color:var(--primary);text-decoration:none}
.prop .val a:hover{text-decoration:underline;text-underline-offset:2px}
.prop .val .chip-inline{vertical-align:middle}
/* actions — всегда видны; колонка фиксированная, ряды не прыгают */
.prop .actions{display:flex;justify-content:flex-end;gap:2px;align-items:center}
/* Пустой actions-контейнер остаётся скрытым — но колонка остаётся */
.prop-compact{min-height:36px;padding:6px 14px;grid-template-columns:120px minmax(0,1fr) 48px;gap:10px}
.prop-compact .lbl,.prop-compact .val{font-size:.846rem}
@media (hover:none){
  .prop .actions{visibility:visible}
}
.ibtn{background:transparent;border:0;width:24px;height:24px;border-radius:var(--radius-sm);cursor:pointer;color:var(--muted-fg);display:flex;align-items:center;justify-content:center;transition:background var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)}
.ibtn:hover{background:var(--muted);color:var(--foreground)}
.ibtn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.ibtn .i{width:12px;height:12px}
.chip-inline{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:.769rem;font-weight:500;background:color-mix(in oklch,var(--primary) 14%,transparent);color:var(--primary);margin-left:6px}

/* ---- EmptyState ----
   4 варианта: default (пусто) / filtered (фильтры активны) /
   error (запрос упал) / locked (coming soon).
   Корень — .empty, модификаторы — .empty-filtered/-error/-locked. */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:40px 24px;background:var(--surface-1);border:1px dashed var(--border-strong);border-radius:var(--radius-xl);max-width:560px}
.empty-ic{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--muted);border-radius:var(--radius-xl);color:var(--muted-fg)}
.empty-ic .i{width:28px;height:28px}
.empty-ic.primary{background:color-mix(in oklch,var(--primary) 10%,var(--surface-1));color:var(--primary)}
.empty-ic.danger{background:color-mix(in oklch,var(--red-500) 12%,var(--surface-1));color:var(--red-600)}
.empty h3{font-size:1.154rem;font-weight:600;letter-spacing:-.01em;margin:4px 0 0}
.empty p{font-size:.923rem;color:var(--muted-fg);max-width:44ch;line-height:1.5}
.empty .row{margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.empty .hint{font-size:.769rem;color:var(--muted-fg);margin-top:4px;display:inline-flex;align-items:center;gap:6px}
.empty .log{font-family:var(--font-mono);font-size:.846rem;color:var(--muted-fg);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:6px 10px}

/* Filtered — chip-row сверху, основное сообщение ниже */
.empty-filtered{padding:0;border:1px solid var(--border);background:var(--surface-1)}
.empty-filtered .chips{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--surface-2)}
.empty-filtered .body{padding:40px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}

/* Locked — дыряная штриховка, notify-форма */
.empty-locked{background:repeating-linear-gradient(135deg,var(--surface-1),var(--surface-1) 10px,var(--surface-2) 10px,var(--surface-2) 11px);border-style:solid}
.empty-locked .soon{font-size:.769rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);font-family:var(--font-mono)}
.empty-locked .notify{display:flex;gap:4px;margin-top:4px;background:var(--surface-1);border:1px solid var(--border);border-radius:999px;padding:4px 4px 4px 14px}
.empty-locked .notify input{background:transparent;border:0;outline:0;font-family:inherit;font-size:.846rem;width:220px;color:var(--foreground)}
.empty-locked .notify button{border:0;background:var(--primary);color:#fff;padding:5px 14px;border-radius:999px;cursor:pointer;font-weight:500;font-family:inherit;font-size:.846rem}

/* ---- PageHeader ----
   Composite: .bc + .ph-row (icon + title + badges + desc + meta + actions).
   Варианты: default (standard), .ph-hero (cover), .ph-compact (listing).
   Под шапкой монтируется .ph-stats и/или .tabs-row. */
.ph{padding:20px 24px 0;background:var(--surface-1);position:relative}
.ph .bc{margin-bottom:8px}
.ph-row{display:flex;align-items:flex-start;gap:16px}
.ph-main{flex:1;min-width:0}
.ph-ico{width:44px;height:44px;flex:none;border-radius:999px;background:color-mix(in oklch,var(--primary) 14%,transparent);color:var(--primary);display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:600;font-size:1.077rem;letter-spacing:-.02em}
.ph-ico .i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.ph-title{font-size:1.538rem;font-weight:600;letter-spacing:-.015em;color:var(--foreground);white-space:nowrap;margin:0}
.ph-desc{font-size:.923rem;color:var(--muted-fg);margin-top:4px;line-height:1.5;max-width:78ch}
.ph-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:.769rem;color:var(--muted-fg)}
.ph-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ph-meta svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.ph-acts{display:flex;gap:8px;align-items:center;flex:none}
.ph>.ph-stats,.ph>.tabs-row{margin:16px -24px 0}
.ph>.tabs-row{padding:0 24px}

/* Hero variant — cover + oversized icon */
.ph-hero{padding:0;overflow:hidden}
.ph-hero .cover{position:relative;height:140px;background:radial-gradient(1200px 300px at 80% 120%,color-mix(in oklch,var(--primary) 55%,transparent),transparent 60%),linear-gradient(135deg,oklch(.32 .09 260),oklch(.22 .05 270))}
.ph-hero .cover::after{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(0deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px}
.ph-hero .cover .bc{position:absolute;top:16px;left:24px;margin:0;color:rgba(255,255,255,.85);z-index:3}
.ph-hero .cover .bc a,.ph-hero .cover .bc b{color:#fff}
.ph-hero .cover .bc a{opacity:.8}
.ph-hero .body{padding:16px 24px 0;position:relative;z-index:2;background:var(--surface-1)}
.ph-hero .ph-ico{width:80px;height:80px;border-radius:var(--radius-xl);background:linear-gradient(135deg,oklch(.72 .17 180),oklch(.55 .18 220));box-shadow:0 10px 30px -8px rgba(0,0,0,.35);color:#fff;font-size:1.846rem;margin-top:-56px}
.ph-hero .ph-title{font-size:1.846rem}
.ph-hero>.ph-stats,.ph-hero>.tabs-row{margin:16px -24px 0}
.ph-hero>.tabs-row{padding:0 24px}

/* Compact variant — listing pages */
.ph-compact{padding:16px 24px 0}
.ph-compact .ph-title{font-size:1.231rem;line-height:1}
.ph-compact .ph-title-row{align-items:center}
.ph-compact .ph-desc{display:none}
.ph-compact .ph-ico{width:36px;height:36px;border-radius:999px}
.ph-compact .ph-ico .i{width:18px;height:18px}
.ph-compact .ph-row{align-items:center}

/* ---- OnboardingChecklist ----
   Welcome + пронумерованный чек-лист + preview-иллюстрация.
   Grid 1fr/auto. Для первого входа, master-setup и пустых онбордов. */
.onboard{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:28px;background:radial-gradient(600px 120px at 10% 0%,color-mix(in oklch,var(--primary) 9%,transparent),transparent 70%),var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);min-height:280px}
.onboard .text h3{font-size:1.231rem;letter-spacing:-.015em;font-weight:600;margin:0}
.onboard .text p{font-size:.923rem;color:var(--muted-fg);line-height:1.5;margin-top:6px}
.onboard ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:6px}
.onboard li{display:flex;align-items:center;gap:8px;font-size:.846rem;color:var(--foreground)}
.onboard li .ch{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-strong);flex:none;display:flex;align-items:center;justify-content:center}
.onboard li.done .ch{background:var(--green-500);border-color:var(--green-500);color:#fff}
.onboard li.done .ch svg{width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.onboard li.done{color:var(--muted-fg);text-decoration:line-through;text-decoration-color:color-mix(in oklch,var(--muted-fg) 40%,transparent)}
.onboard .actions{margin-top:18px;display:flex;gap:8px}
.onboard .preview{width:220px;height:200px;border-radius:var(--radius-xl);background:linear-gradient(135deg,oklch(.95 .01 250),oklch(.88 .03 260));border:1px solid var(--border);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.onboard .preview svg{width:88px;height:88px;stroke:var(--primary);fill:none;stroke-width:1.2;opacity:.8}
@media (max-width:800px){.onboard{grid-template-columns:1fr}.onboard .preview{display:none}}

/* ---- SearchField ---- */
.search{display:flex;align-items:center;gap:8px;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:0 10px;height:36px;max-width:420px;transition:all var(--motion-fast) var(--motion-ease)}
.search:focus-within{border-color:var(--ring);box-shadow:var(--shadow-focus)}
.search .i{color:var(--muted-fg);width:14px;height:14px}
.search input{flex:1;background:transparent;border:0;outline:none;font-family:inherit;font-size:1rem;color:var(--foreground)}
.search input::placeholder{color:var(--muted-fg)}
.search .kbd{font-size:.769rem}
.search-clear{background:transparent;border:0;cursor:pointer;padding:2px;border-radius:4px;color:var(--muted-fg);display:flex}
.search-clear:hover{background:var(--muted);color:var(--foreground)}
.search-clear .i{width:12px;height:12px}

/* ---- Toolbar ---- */
.tbar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);flex-wrap:wrap}
.tbar .sep{width:1px;height:20px;background:var(--border)}
.tbar .grow{flex:1}
.count{font-size:.846rem;color:var(--muted-fg);font-variant-numeric:tabular-nums}
.count b{color:var(--foreground);font-weight:600}
/* .filter-btn — удалён; Toolbar использует .chip-filter (см. FilterChip) */

/* ---- StatusPill ---- */
.sp{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:.769rem;font-weight:500;line-height:1.4;background:color-mix(in oklch,var(--c) 14%,transparent);color:var(--c);border:1px solid color-mix(in oklch,var(--c) 22%,transparent)}
.sp .d{width:6px;height:6px;border-radius:999px;background:var(--c)}
.sp-active{--c:var(--green-700)}
.sp-guest{--c:var(--blue-600)}
.sp-pending{--c:var(--amber-700)}
.sp-inactive{--c:var(--gray-500)}
.sp-alumni{--c:var(--violet-700)}
.sp-removed{--c:var(--red-600)}
html.dark .sp-active{--c:oklch(.780 .165 160.5)}
html.dark .sp-guest{--c:oklch(.780 .170 258)}

/* ---- AttendanceCell ---- */
.atc{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface-1);color:var(--muted-fg);cursor:pointer;transition:all var(--motion-fast) var(--motion-ease)}
.atc:hover{border-color:var(--muted-fg)}
.atc .i{width:14px;height:14px}
.atc-p{background:color-mix(in oklch,var(--green-500) 14%,var(--surface-1));border-color:color-mix(in oklch,var(--green-500) 35%,transparent);color:var(--green-700)}
.atc-a{background:color-mix(in oklch,var(--red-500) 10%,var(--surface-1));border-color:color-mix(in oklch,var(--red-500) 25%,transparent);color:var(--red-600)}
.atc-e{background:color-mix(in oklch,var(--amber-500) 14%,var(--surface-1));border-color:color-mix(in oklch,var(--amber-500) 30%,transparent);color:var(--amber-700)}
.atc-u{border-style:dashed}

/* ---- FilterChip (active filter with key:value + remove) ---- */
.chip-filter-row{display:flex;gap:6px;flex-wrap:wrap}
.chip-filter{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--border);padding:3px 4px 3px 10px;border-radius:999px;font-size:.769rem;color:var(--foreground)}
.chip-filter .k{color:var(--muted-fg)}
.chip-filter .x{width:16px;height:16px;border-radius:50%;background:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;padding:0}
.chip-filter .x:hover{background:var(--border-strong)}
.chip-filter .x svg{width:8px;height:8px;stroke:var(--muted-fg);stroke-width:2;fill:none}

/* ---- NotificationItem ---- */
.nlist{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;max-width:480px}
.ni{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px 12px 28px;border-bottom:1px solid var(--border);position:relative;cursor:pointer;transition:background var(--motion-fast) var(--motion-ease)}
.ni:last-child{border-bottom:0}
.ni:hover{background:var(--surface-3)}
.ni.unread{background:color-mix(in oklch,var(--sem-info) 5%,var(--surface-1))}
.ni.unread::before{content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--sem-info);border-radius:999px}
.ni-ic{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.ni-ic .i{width:14px;height:14px}
.ni-mention{background:var(--primary)}
.ni-success{background:var(--green-500)}
.ni-warning{background:var(--amber-500)}
.ni-body{min-width:0}
.ni-body p{margin:0;font-size:.923rem;line-height:1.4;color:var(--foreground)}
.ni-body p b{font-weight:600}
.ni-body p em{font-style:normal;color:var(--muted-fg)}
.ni-time{font-size:.769rem;color:var(--muted-fg);white-space:nowrap;padding:2px;font-variant-numeric:tabular-nums}

/* ---- KpiTile ----
   Сводный тайл для KPI-стрипа: компактный label + иконка сверху,
   крупное число посередине, низ — DeltaChip (.delta) + подпись.
   Клик по всей плитке → детальный view. Использует атом .delta —
   никаких кастомных delta-стилей внутри не заводим.

   Варианты:
   - default    — интерактивный (hover, cursor:pointer). Оборачивать в <button> или <a>.
   - kpi-plain  — статичный, без hover/cursor, для дашбордов-отчётов.
   - kpi-compact— меньший padding + меньше число, для плотных сеток (6+ колонок).
*/
.kpi{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:14px 16px;
  display:flex;flex-direction:column;gap:4px;
  cursor:pointer;position:relative;
  transition:border-color var(--motion-fast) var(--motion-ease),
             box-shadow var(--motion-fast) var(--motion-ease),
             transform var(--motion-fast) var(--motion-ease);
  text-align:left;color:inherit;font:inherit;
  width:100%;
}
.kpi:hover{border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.kpi:focus-visible{outline:none;border-color:var(--ring);box-shadow:var(--shadow-focus)}
.kpi-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  color:var(--muted-fg);font-size:.769rem;font-weight:500;
}
.kpi-head .ic{width:14px;height:14px;opacity:.7;flex:none}
.kpi-value{
  font-size:1.85rem;font-weight:600;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--foreground);
}
.kpi-sub{
  display:flex;align-items:center;gap:6px;
  font-size:.769rem;color:var(--muted-fg);margin-top:2px;
}
/* Статичный — без hover и cursor */
.kpi-plain{cursor:default}
.kpi-plain:hover{border-color:var(--border);box-shadow:none}
/* Компактный — для плотных сеток */
.kpi-compact{padding:10px 12px;gap:2px}
.kpi-compact .kpi-value{font-size:1.385rem}
.kpi-compact .kpi-head{font-size:.692rem}

/* ---- HighlightTile (ex-GradientStatCard) ----
   «Витринный» KPI для бренд-зон: welcome-экран, onboarding, презентации,
   публичные страницы. Радиальный blob в углу (opacity .4, blur 18),
   gradient-text для числа (моно, 2rem 700). Лейбл снизу, uppercase.

   ❗ Это НЕ для операционного дашборда. Если нужен тренд (+12 за неделю)
   и интерактив — используй `.kpi` (KpiTile). HighlightTile — статичный,
   для wow-зон, не для ежедневной работы.

   Градиент задаётся через `--hl-grad` (пер-тайл или на контейнере).
   Варианты: hl-brand | hl-sunset | hl-forest | hl-ocean | hl-pastel —
   соответствуют каноническим градиентам из gradients.md. */
.hl-tile{
  position:relative;overflow:hidden;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:18px;
  --hl-grad:var(--grad-brand);
}
.hl-tile::before{
  content:"";position:absolute;
  width:80px;height:80px;top:-20px;right:-20px;
  border-radius:50%;filter:blur(18px);opacity:.4;
  background:var(--hl-grad);
  pointer-events:none;
}
.hl-tile .v{
  position:relative;
  font-family:var(--font-mono);
  font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1;
  background:var(--hl-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.hl-tile .l{
  position:relative;
  color:var(--muted-fg);
  font-size:.769rem;
  text-transform:uppercase;letter-spacing:.04em;
  font-weight:600;
  margin-top:4px;
}
.hl-brand{--hl-grad:var(--grad-brand)}
.hl-sunset{--hl-grad:var(--grad-sunset)}
.hl-forest{--hl-grad:var(--grad-forest)}
.hl-ocean{--hl-grad:var(--grad-ocean)}
.hl-pastel{--hl-grad:var(--grad-pastel)}

/* ---- PersonRow ----
   Строка контакта вне таблицы: peek-панели, event attendees, group members,
   search suggestions, mention-picker. Flexbox, НЕ grid — в отличие от
   табличной строки в people-list, где колонки выровнены между собой.

   Анатомия: [avatar]  [main: name+meta]  [chips]  [actions].
   Actions появляются на hover строки (desktop). На touch — всегда видны.

   Состояния: default | hover | .pr-active (выделена в peek) | .pr-muted (former).

   Варианты плотности:
   - default       — 44px min-height, padding 8 12, для обычных списков 25–50 строк
   - .pr-compact   — 32px min-height, padding 4 8,   для плотных списков 100+
   - .pr-comfy     — 56px min-height, padding 12 16, для peek и mobile
   - .pr-mini      — 24px min-height, avatar 20px, без chips/actions —
                     для mention-picker, assignee-dropdown, breadcrumb trail.

   Для табличной строки people-list используется СВОЙ паттерн (<tr>), не .pr. */
.pr{
  display:flex;align-items:center;gap:12px;
  padding:8px 12px;min-height:44px;
  border-radius:var(--radius-md);
  cursor:pointer;
  text-decoration:none;color:inherit;
  transition:background var(--motion-fast) var(--motion-ease);
}
.pr:hover{background:var(--muted)}
.pr:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.pr.pr-active{background:var(--muted);box-shadow:inset 2px 0 0 var(--primary)}
.pr.pr-muted{opacity:.6}

.pr-av{flex:none}

.pr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.pr-name{font-size:.923rem;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-meta{font-size:.769rem;color:var(--muted-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.pr-meta .dot{width:2px;height:2px;background:currentColor;border-radius:50%;flex:none;opacity:.5}

.pr-chips{display:flex;align-items:center;gap:4px;flex:none}

.pr-actions{
  display:flex;align-items:center;gap:2px;flex:none;
}

/* Compact — плотные списки */
.pr-compact{padding:4px 8px;min-height:32px;gap:8px}
.pr-compact .pr-name{font-size:.846rem}
.pr-compact .pr-meta{font-size:.692rem}

/* Comfy — peek-панели, mobile */
.pr-comfy{padding:12px 16px;min-height:56px;gap:14px}
.pr-comfy .pr-name{font-size:1rem}
.pr-comfy .pr-meta{font-size:.846rem}

/* Mini — mention-picker, assignee dropdown */
.pr-mini{padding:4px 8px;min-height:24px;gap:6px;border-radius:var(--radius-sm)}
.pr-mini .pr-name{font-size:.846rem}
.pr-mini .pr-meta,.pr-mini .pr-chips,.pr-mini .pr-actions{display:none}

/* List wrapper — horizontal dividers между рядами.
   Разделитель на wrapper, не на .pr, чтобы hover-bg перекрывал его корректно.
   Не применяется к .pr-mini (там разделители избыточны — mini используется
   в плотных цепочках типа mentions/recent, где сам список короткий). */
.pr-list{display:flex;flex-direction:column}
.pr-list > .pr + .pr{border-top:1px solid var(--border)}
.pr-list > .pr-mini + .pr-mini{border-top:none}

/* ---- Meta tone modifiers ----
   Акцент одного слова-статуса внутри muted meta-строк (pr-meta, ai-meta
   и любых `font-size:.769rem; color: muted`). Применять точечно:
   <span class="tone-urgent">Просрочено</span> · 24ч+ — окрашивается только
   одно слово, остальная meta остаётся muted. */
.tone-ok{color:var(--green-700)}
.tone-due{color:var(--amber-600,oklch(.65 .18 70))}
.tone-urgent{color:var(--red-600)}
html.dark .tone-ok{color:oklch(.78 .18 160)}
html.dark .tone-due{color:oklch(.80 .18 75)}
html.dark .tone-urgent{color:oklch(.78 .18 25)}

/* ---- ActionItem ----
   Строка «сделать что-то»: task-виджет на дашборде, onboarding-чеклист,
   Empty state suggestions, «Для вас» feed.

   Отличие от NotificationItem (.ni): там «что произошло» (прошедшее,
   unread-dot), здесь «что сделать» (будущее, всегда actionable).

   Анатомия: [icon-tile] [title + desc + meta] [CTA].
   Вся строка — hover target. CTA справа — единственный акцент.
   Левый icon-tile — 32×32, radius-md, surface-2 + 1px.

   ⚠️ НЕ добавляй badge/chip рядом с CTA. Два акцента в одной зоне —
   хаос. Счётчик (8 новых, 3 запроса) пиши В title или meta.
   Опциональный `.ai-chips` слот существует для редких кейсов, когда
   нет CTA — но это антипаттерн, если CTA есть.

   Состояния: default | .ai-completed (checked, зачёркнуто) |
              .ai-urgent (primary left-border + dot).
   Варианты:   default | .ai-compact (без desc, одна строка) */
.ai{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px;min-height:56px;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  cursor:pointer;
  text-decoration:none;color:inherit;
  position:relative;
  transition:border-color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease);
}
.ai:hover{border-color:var(--border-strong);background:var(--surface-2)}
.ai:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

.ai-ic{
  width:32px;height:32px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:var(--muted-fg);
}
.ai-ic .i{width:16px;height:16px}

.ai-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35;padding-top:1px}
.ai-title{font-size:.923rem;font-weight:500;color:var(--foreground)}
.ai-desc{font-size:.846rem;color:var(--muted-fg)}
.ai-meta{font-size:.769rem;color:var(--muted-fg);margin-top:4px;display:flex;align-items:center;gap:6px}
.ai-meta .dot{width:2px;height:2px;background:currentColor;border-radius:50%;flex:none;opacity:.5}

.ai-chips{display:flex;align-items:center;gap:4px;flex:none;align-self:center}

.ai-cta{flex:none;align-self:center}

/* Compact — без desc, одна строка */
.ai-compact{align-items:center;min-height:44px;padding:8px 12px}
.ai-compact .ai-desc{display:none}
.ai-compact .ai-body{padding-top:0}

/* Completed — checked, зачёркнутый title */
.ai-completed{background:transparent;border-style:dashed}
.ai-completed:hover{background:var(--surface-2)}
.ai-completed .ai-ic{background:color-mix(in oklch,var(--green-500) 14%,transparent);border-color:color-mix(in oklch,var(--green-500) 30%,transparent);color:var(--green-700)}
.ai-completed .ai-title{text-decoration:line-through;color:var(--muted-fg);font-weight:400}

html.dark .ai-completed .ai-ic{color:oklch(.78 .18 160)}

/* Urgent — акцентная граница + dot */
.ai-urgent{border-color:color-mix(in oklch,var(--primary) 40%,var(--border))}
.ai-urgent::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--primary);
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
}
.ai-urgent .ai-ic{background:color-mix(in oklch,var(--primary) 12%,transparent);border-color:color-mix(in oklch,var(--primary) 30%,transparent);color:var(--primary)}

/* List wrapper — stacked rows, unified container */
.ai-list{display:flex;flex-direction:column;gap:8px}

/* ---- FeedItem ----
   Элемент ленты «что уже произошло», в хронологическом порядке.
   Profile timeline, group activity log, event attendance history.

   Отличие: .ni — read/unread уведомления; .ai — actionable задачи;
   .fi — хронологическая запись прошедшего, без CTA.

   Анатомия: [timeline-dot + connector-line] [actor/icon] [body + time].
   Внутри body: actor (жирный) + глагол + объект (em, muted) + опц.
   meta-строка (время, место). Клик по строке = открыть детали объекта.

   Варианты:
   - default    — с вертикальной линией-коннектором, для profile timeline
   - .fi-flat   — без линии, плотный activity-list (group members, etc.)
   - .fi-attached — с вложенной карточкой (preview сообщения, файла, event)

   Тона dot по типу события:
   - fi-dot-default   — muted (generic: обновление, изменение)
   - fi-dot-join      — sem-info (sky, «пришёл/присоединился»)
   - fi-dot-success   — green (чекин, visit, достижение)
   - fi-dot-note      — primary (заметка, комментарий, tag)
   - fi-dot-warning   — amber (пропуск, отписка, alerting)
   - fi-dot-danger    — red (удалён, исключён, ошибка)
*/
.fi-list{position:relative;display:flex;flex-direction:column}
.fi-list::before{
  content:"";position:absolute;
  left:14px;top:14px;bottom:14px;
  width:1px;background:var(--border);
  pointer-events:none;
}
.fi{
  position:relative;
  display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:flex-start;
  padding:10px 4px 10px 0;
  cursor:pointer;
  text-decoration:none;color:inherit;
  transition:background var(--motion-fast) var(--motion-ease);
  border-radius:var(--radius-md);
  line-height:1.4;
}
.fi:hover{background:var(--surface-2)}
.fi:hover .fi-dot{box-shadow:0 0 0 3px var(--surface-2)}
.fi:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* Timeline rail column — dot only (line is on .fi-list::before) */
.fi-rail{
  position:relative;width:28px;min-height:24px;
  display:flex;justify-content:center;align-items:flex-start;
}
.fi-dot{
  position:relative;z-index:1;
  width:10px;height:10px;border-radius:999px;
  background:var(--c,var(--muted-fg));
  box-shadow:0 0 0 3px var(--surface-1);
  --c:var(--muted-fg);
  /* Align dot with the center of first text line (line-height of .fi-text ≈ 1.4 × .923rem) */
  margin-top:.46em;
}
.fi-dot-default{--c:var(--muted-fg)}
.fi-dot-join{--c:var(--sem-info)}
.fi-dot-success{--c:var(--green-500)}
.fi-dot-note{--c:var(--primary)}
.fi-dot-warning{--c:var(--amber-500)}
.fi-dot-danger{--c:var(--red-600)}

/* Body — actor + verb + object + meta */
.fi-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.fi-text{font-size:.923rem;color:var(--foreground)}
.fi-text b{font-weight:600}
.fi-text em{font-style:normal;color:var(--muted-fg)}
.fi-meta{font-size:.769rem;color:var(--muted-fg);display:flex;align-items:center;gap:6px}
.fi-meta .dot{width:2px;height:2px;background:currentColor;border-radius:50%;flex:none;opacity:.5}

/* Time (right) — align with first text line, same as dot */
.fi-time{font-size:.769rem;color:var(--muted-fg);white-space:nowrap;font-variant-numeric:tabular-nums;align-self:center}

/* Attached — inline-карточка-уточнение под body. Визуально легче,
   чем сам FeedItem — это не дубль, а ref. Один ряд: icon + title + meta. */
.fi-attach{
  margin-top:6px;
  padding:6px 10px;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  display:inline-flex;align-items:center;gap:8px;
  font-size:.846rem;color:var(--muted-fg);
  max-width:100%;
}
.fi-attach .fi-attach-ic{
  width:20px;height:20px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted-fg);
}
.fi-attach .fi-attach-ic .i{width:14px;height:14px}
.fi-attach .fi-attach-body{min-width:0;display:inline-flex;align-items:baseline;gap:6px;flex:1}
.fi-attach .fi-attach-title{font-size:.846rem;color:var(--foreground);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-attach .fi-attach-meta{font-size:.769rem;color:var(--muted-fg);white-space:nowrap}
.fi-attach .fi-attach-meta::before{content:"·";margin-right:6px;opacity:.5}

/* Flat — без вертикальной линии, для плотных activity-списков.
   Все строки одиночные — center-align работает чище, чем em-hacks. */
.fi-flat::before{display:none}
.fi-flat.fi-list > .fi{padding:8px 4px;border-bottom:1px solid var(--border);align-items:center}
.fi-flat.fi-list > .fi:last-child{border-bottom:0}
.fi-flat .fi-rail{align-items:center}
.fi-flat .fi-dot{margin-top:0}

/* ================================================================
   .er — EventRow (molecule)
   Строка события. Использует атом .date-pill.
   Анатомия: [date-pill] [title + meta] [attendance] [actions]
   Модификаторы:
   - default                — широкая строка (dashboard upcoming, events list)
   - .er-compact            — плотный список (past, archive)
   - .er-minimal            — только дата + название (search, связанные)
   Состояния:
   - .er-today              — дата с акцентом (сам .date-pill уже .today)
   - .er-past               — opacity .55, без actions
   - .er-draft              — dashed border
   ================================================================ */
.er{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;align-items:center;
  padding:8px 10px;
  border-radius:var(--radius-md);
  background:transparent;
  text-align:left;border:none;width:100%;
  color:var(--foreground);text-decoration:none;
  cursor:pointer;
  transition:background .08s ease;
}
.er:hover{background:var(--surface-2)}
.er:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

.er-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.er-title{font-size:.923rem;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er-meta{font-size:.769rem;color:var(--muted-fg);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er-meta .dot{width:2px;height:2px;background:currentColor;border-radius:50%;flex:none;opacity:.5}

/* Правая часть — attendance + actions. Actions скрыты, появляются на hover
   Без резервирования места: attendance занимает всё пространство, actions
   перекрывают его справа при hover. */
.er-right{display:flex;align-items:center;gap:10px;position:relative}

/* Attendance — компактный формат: "124 / 180" + опциональная мини-полоса */
.er-att{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.846rem;color:var(--muted-fg);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.er-att-count{font-weight:500;color:var(--foreground)}
.er-att-sep{opacity:.5}
.er-att-bar{width:40px;height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden;flex:none;margin-left:2px}
.er-att-bar > span{display:block;height:100%;background:var(--primary);border-radius:2px}

/* Actions — всегда видны, ряды не прыгают */
.er-actions{display:flex;align-items:center;gap:2px}

/* Compact — плотные ряды */
.er-compact{padding:6px 10px;gap:10px}
.er-compact .er-title{font-size:.846rem}
.er-compact .er-meta{font-size:.769rem}

/* Minimal — без attendance, без actions */
.er-minimal{grid-template-columns:auto minmax(0,1fr);padding:6px 8px;gap:10px}
.er-minimal .er-right{display:none}

/* Past — приглушённый */
.er-past{opacity:.6}
.er-past .er-actions{opacity:.5}

/* Draft — dashed */
.er-draft{border:1px dashed var(--border)}

/* List wrapper — добавляет horizontal dividers между рядами.
   Разделитель НЕ border на .er, чтобы hover-bg перекрывал его корректно. */
.er-list{display:flex;flex-direction:column}
.er-list > .er + .er{border-top:1px solid var(--border)}

/* Cols — выровненные колонки внутри .er-right по всем строкам.
   Без модификатора .er-right остаётся flex (молекулы, одиночный ev). С модификатором
   на обёртке — grid, колонки выровнены от строки к строке. */
/* 3 колонки: campus | cap | vols. Actions оверлеят справа поверх vols на hover
   — без отдельной grid-колонки, чтобы соседние колонки не двигались. */
.er-list-cols > .er .er-right{
  display:grid;
  grid-template-columns:140px 150px 1fr;
  align-items:center;
  column-gap:12px;
  position:relative;
  padding-right:4px;
}
.er-list-cols > .er .er-actions{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  display:none;align-items:center;gap:2px;
  background:var(--surface-2);
  padding-left:8px;
  box-shadow:-12px 0 12px -8px var(--surface-2);
}
.er-list-cols > .er:hover .er-actions,
.er-list-cols > .er:focus-within .er-actions{display:flex}
@media(hover:none){
  .er-list-cols > .er .er-actions{position:static;transform:none;display:flex;box-shadow:none;background:transparent;padding-left:0}
}

/* ---- EventRow · stacked (.er-stacked) ----
   Двухстрочный вариант EventRow с выровненными колонками между строками
   через subgrid. Слева — DateChip (.dc) на всю высоту, в центре —
   title/meta стопкой, справа — тематические колонки (campus, capacity)
   центрированные по вертикали, в углу — actions (hover-reveal).

   HTML:
   <div class="er-list er-list-cols er-stacked">
     <a class="er">
       <div class="dc dc-today">…</div>
       <div class="er-title">…</div>
       <div class="er-meta">…</div>
       <span class="er-campus">…</span>
       <div class="er-cap">…</div>
       <div class="er-actions">…</div>
     </a>
   </div>
*/
.er-list-cols.er-stacked{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 110px 160px minmax(16px,0.25fr) auto;
  gap:0;
}
.er-list-cols.er-stacked > .er{
  display:grid;
  grid-template-columns:subgrid;
  grid-column:1 / -1;
  grid-template-rows:auto auto;
  column-gap:14px;
  row-gap:2px;
  padding:10px 12px;
  border-radius:0;
  align-items:center;
}
.er-list-cols.er-stacked > .er + .er{border-top:1px solid var(--border)}
.er-list-cols.er-stacked > .er > .dc{grid-row:1 / 3;grid-column:1;align-self:center}
.er-list-cols.er-stacked > .er > .er-title{grid-row:1;grid-column:2;align-self:end}
.er-list-cols.er-stacked > .er > .er-meta{grid-row:2;grid-column:2;align-self:start}
.er-list-cols.er-stacked > .er > .er-campus{grid-row:1 / 3;grid-column:3;align-self:center;justify-self:start}
.er-list-cols.er-stacked > .er > .er-cap{grid-row:1 / 3;grid-column:4;align-self:center;justify-self:stretch;min-width:0;width:100%}
/* Stacked-вариант: цифры слева, бар справа фикс-ширины — правый край ряда ровный. */
.er-list-cols.er-stacked > .er > .er-cap{gap:10px}
.er-list-cols.er-stacked > .er > .er-cap .er-cap-bar{flex:none;width:100px}
.er-list-cols.er-stacked > .er > .er-cap .er-cap-text{min-width:52px;text-align:right}
/* Actions — всегда видны, без absolute/box-shadow; сбрасываем hover-reveal из базового .er-list-cols */
.er-list-cols.er-stacked > .er > .er-actions{
  grid-row:1 / 3;grid-column:6;align-self:center;
  position:static;top:auto;right:auto;transform:none;
  display:flex;
  padding-left:0;background:transparent;box-shadow:none;
}
.er-list-cols.er-stacked > .er:hover > .er-actions,
.er-list-cols.er-stacked > .er:focus-within > .er-actions{display:flex}

/* ---- EventRow · extra slots ----
   Необязательные слоты внутри .er-right (порядок: campus → cap → vols → actions).
   Используются на dashboard / events-list, когда нужны кампус, capacity и
   volunteer stack в одном ряду. */
.er-campus{display:inline-flex;align-items:center;gap:6px;font-size:.769rem;color:var(--muted-fg);white-space:nowrap;flex:none}
/* .er-campus .dot — декоративная точка кампуса. НЕ используется в stacked-варианте. */
.er-campus .dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none}
.er-list-cols.er-stacked > .er > .er-campus .dot{display:none}

.er-cap{display:flex;align-items:center;gap:8px;min-width:100px;flex:none}
.er-cap-text{font-size:.769rem;font-variant-numeric:tabular-nums;color:var(--foreground);font-weight:500;white-space:nowrap}
.er-cap-text .total{color:var(--muted-fg);font-weight:400}
.er-cap-bar{flex:1;height:4px;background:var(--surface-3);border-radius:999px;overflow:hidden;min-width:48px}
.er-cap-bar > span{display:block;height:100%;background:var(--primary);border-radius:999px;transition:width var(--motion-normal) var(--motion-ease)}
.er-cap.warn .er-cap-bar > span{background:var(--amber-500)}
.er-cap.full .er-cap-bar > span{background:var(--green-700)}

.er-vols{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap}
.er-vol-need{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--amber-700);flex:none}
.er-vol-need .i{width:14px;height:14px}
html.dark .er-vol-need{color:oklch(.82 .14 75)}

/* ================================================================
   .gr — GroupRow (molecule)
   Строка малой группы. Слева — group-tile (цветной квадрат),
   справа — members-count, actions на hover.
   Анатомия: [tile] [name + meta] [count] [actions]
   Модификаторы:
   - default                — широкая строка (dashboard, groups list)
   - .gr-compact            — плотный список (archive, all groups)
   - .gr-minimal            — только tile + name (mention-picker, related)
   Состояния:
   - .gr-active             — inset primary stripe (peek)
   - .gr-archived           — opacity .6
   ================================================================ */
.gr{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;align-items:center;
  padding:8px 10px;
  border-radius:var(--radius-md);
  background:transparent;
  text-align:left;border:none;width:100%;
  color:var(--foreground);text-decoration:none;
  cursor:pointer;
  transition:background .08s ease;
}
.gr:hover{background:var(--surface-2)}
.gr:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.gr.gr-active{background:var(--muted);box-shadow:inset 2px 0 0 var(--primary)}
.gr.gr-archived{opacity:.6}

/* Group tile — цветной квадрат с радиусом, 36×36.
   Градиенты берём у person-avatar (.av-g1..g6) — можно использовать те же,
   либо задавать кастомные section-цвета. */
.gr-tile{
  flex:none;width:36px;height:36px;
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:.923rem;
  background:var(--c,var(--primary));
  overflow:hidden;
}
.gr-tile .i{width:18px;height:18px;color:#fff}
.gr-tile-sm{width:28px;height:28px;font-size:.769rem}
.gr-tile-sm .i{width:14px;height:14px}

.gr-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.gr-name{font-size:.923rem;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-meta{font-size:.769rem;color:var(--muted-fg);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-meta .dot{width:2px;height:2px;background:currentColor;border-radius:50%;flex:none;opacity:.5}

/* Right — members count + actions */
.gr-right{display:flex;align-items:center;gap:10px;position:relative}

.gr-count{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.846rem;color:var(--muted-fg);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.gr-count .i{width:12px;height:12px;opacity:.7}
.gr-count b{font-weight:500;color:var(--foreground)}

.gr-actions{display:flex;align-items:center;gap:2px}

/* Compact — плотные ряды */
.gr-compact{padding:6px 10px;gap:10px}
.gr-compact .gr-tile{width:28px;height:28px;font-size:.769rem}
.gr-compact .gr-tile .i{width:14px;height:14px}
.gr-compact .gr-name{font-size:.846rem}
.gr-compact .gr-meta{font-size:.769rem}

/* Minimal — без count/actions */
.gr-minimal{grid-template-columns:auto minmax(0,1fr);padding:6px 8px;gap:10px}
.gr-minimal .gr-right{display:none}

/* List wrapper — horizontal dividers */
.gr-list{display:flex;flex-direction:column}
.gr-list > .gr + .gr{border-top:1px solid var(--border)}

/* ================================================================
   DOC SHELL — preview chrome used by phase-1/2/3 wrapped files.
   NOT the product AppShell (that lives in phase-2-shell/phase-2-appshell.html).
   ================================================================ */
.doc-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.doc-nav{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;border-right:1px solid var(--border);background:var(--surface-1);padding:24px 16px;display:flex;flex-direction:column;gap:4px}
.doc-nav h4{font-size:.846rem;font-weight:600;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 4px;padding:0 8px}
.doc-nav h4:first-of-type{margin-top:0}
.doc-nav a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;color:var(--foreground);text-decoration:none;font-size:.923rem;font-weight:500}
.doc-nav a:hover{background:var(--surface-3)}
.doc-nav a.active{background:var(--muted);color:var(--primary)}
.doc-nav .brand{display:flex;align-items:center;gap:8px;padding:0 8px 20px;border-bottom:1px solid var(--border);margin-bottom:16px}
.doc-nav .brand b{font-size:1.077rem;font-weight:700;letter-spacing:-.01em}
.doc-nav .brand .logo{width:24px;height:auto;display:block;color:var(--primary);flex:none}
.doc-nav .brand .ph{margin-left:auto;font-size:.769rem;color:var(--muted-fg);font-family:var(--font-mono);text-transform:uppercase}
.doc-nav .foot{margin-top:auto;display:flex;gap:6px;padding-top:16px;border-top:1px solid var(--border)}
.doc-nav .foot button{flex:1;font-family:inherit;font-size:.846rem;padding:6px 10px;border-radius:6px;background:var(--muted);color:var(--foreground);cursor:pointer;border:1px solid var(--border)}
.doc-nav .foot button.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.doc-main{padding:32px 40px 80px;max-width:1180px}
.page-head{margin-bottom:32px}
.page-head h1{font-size:2.462rem;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.lede{color:var(--muted-fg);font-size:1.077rem;max-width:72ch;line-height:1.6}
section.demo{margin-bottom:48px;scroll-margin-top:20px}
section.demo h2{font-size:1.846rem;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
section.demo .lede{margin-bottom:20px}
h4.sub{font-size:.846rem;font-weight:600;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.04em;margin:24px 0 10px}

/* Phase-1 demo-shell: разделители между секциями, чтобы подзаголовки не «залипали» к предыдущей карточке */
body > .shell > main > section{padding-top:48px;margin-top:32px;border-top:1px solid var(--border)}
body > .shell > main > section:first-of-type{border-top:0;margin-top:0;padding-top:0}
body > .shell > main > section > h2{margin-top:0}
body > .shell > main > section > h4.sub{margin-top:28px}
.note{padding:10px 14px;background:var(--surface-3);border-left:3px solid var(--primary);border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:.923rem;color:var(--foreground);margin:12px 0}
.note b{font-weight:600}
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);padding:20px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.grid-states > div{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.st{font-size:.769rem;font-family:var(--font-mono);color:var(--muted-fg);text-transform:uppercase;letter-spacing:.04em}

/* ---- FormCard (.fc) ----
   Белая карточка-обёртка формы: header (title + опц. slot справа) + body + опц. footer.
   Одинаковая типографическая высота с .panel-title (14/600) — form-секция не кричит,
   иерархию страницы задают page-header и расстояния, а не размер title'ов секций.

   Anatomy:
     .fc
       .fc-hd             (header row, mb 20px)
         .fc-title        (h3, 14/600, опц. .i 18×18 перед текстом)
         .fc-hd-slot      (margin-left:auto — LangBar / toolbar / actions)
       .fc-body           (vertical stack, gap 16px; .fc-row внутри — grid N cols)
       .fc-ft (опц.)      (footer с border-top)
         .fc-ft-right     (margin-left:auto)

   Modifiers:
     .fc-compact — padding 16px (side peek, вложения)
     .fc-ghost   — без surface/border/shadow, padding 0 (вложение в другую карточку)

   .fc-row — grid утилита внутри .fc-body для рядных раскладок.
     Задаётся через --fc-cols (default 3): style="--fc-cols:2" для 2-колоночного ряда.
*/
.fc{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding:24px;
}
.fc-hd{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.fc-title{margin:0;font-size:.923rem;font-weight:600;letter-spacing:-.005em;color:var(--foreground);display:inline-flex;align-items:center;gap:8px;line-height:1.3}
.fc-title .i{width:18px;height:18px;flex:none;opacity:.7}
.fc-hd-slot{margin-left:auto;display:flex;align-items:center;gap:8px}
.fc-body{display:flex;flex-direction:column;gap:16px}
.fc-row{display:grid;grid-template-columns:repeat(var(--fc-cols,3),minmax(0,1fr));gap:16px;align-items:start}
.fc-ft{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}
.fc-ft-right{margin-left:auto;display:flex;align-items:center;gap:8px}

.fc-compact{padding:16px}
.fc-compact .fc-hd{margin-bottom:14px}
.fc-compact .fc-body{gap:12px}
.fc-compact .fc-ft{margin-top:14px;padding-top:12px}

.fc-ghost{background:transparent;border:0;box-shadow:none;padding:0}

/* ---- AvatarDropzone placeholder (atom TBD) ----
   Визуальный плейсхолдер для демо FormCard. Превратится в отдельный атом
   с состояниями empty / filled / uploading / error и размерами sm/md/lg. */
.av-drop{
  width:96px;height:96px;border-radius:var(--radius-lg);
  border:1.5px dashed var(--border);background:var(--surface-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:var(--muted-fg);cursor:pointer;transition:border-color .15s,background .15s,color .15s;
}
.av-drop:hover{border-color:var(--primary);background:color-mix(in oklch,var(--primary) 5%,var(--surface-1));color:var(--primary)}
.av-drop:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--shadow-focus)}
.av-drop .i{width:22px;height:22px}
.av-drop-lbl{font-size:.769rem;font-weight:500}

@media(max-width:640px){
  .fc{padding:16px}
  .fc-row{grid-template-columns:1fr}
}

/* Правило использования: вертикальные разрывы между FormCard'ами на странице
   задаются контейнером (.form-stack{display:flex;flex-direction:column;gap:24px}
   или space-y-6), а не margin'ом на .fc — карточка не знает про соседей. */

/* ---- Legacy shell aliases (phase-1 atoms/molecules use .shell/aside.nav/main) ---- */

/* Doc hero — унифицированная шапка для документ-страниц фаз (phase-0, phase-1, и т.д.)
   Используется как <div class="hero"><div class="chip-row">...</div><h1>...</h1><p>...</p></div>
   в начале <main>. Phase-2 embedded demo (wrap/head/ctl/variants/stage) использует свой паттерн. */
.hero{padding-bottom:32px;border-bottom:1px solid var(--border);margin-bottom:40px}
.chip-row{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.ph-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.769rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono);background:var(--surface-2);color:var(--muted-fg);border:1px solid var(--border);text-decoration:none;white-space:nowrap}
a.ph-chip:hover{background:var(--surface-3);color:var(--foreground)}
.ph-chip.active{background:var(--primary);color:var(--primary-fg);border-color:transparent;pointer-events:none}
.hero h1{font-size:3.077rem;font-weight:600;letter-spacing:-.02em;line-height:1;margin-bottom:16px}
.hero p{font-size:1.231rem;color:var(--muted-fg);max-width:60ch;line-height:1.5}

.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
aside.nav{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;border-right:1px solid var(--border);background:var(--surface-1);padding:24px 16px;display:flex;flex-direction:column;gap:4px}
aside.nav h4{font-size:.846rem;font-weight:600;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 4px;padding:0 8px}
aside.nav h4:first-of-type{margin-top:0}
aside.nav a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;color:var(--foreground);text-decoration:none;font-size:.923rem;font-weight:500}
aside.nav a:hover{background:var(--surface-3)}
aside.nav a.active{background:var(--muted);color:var(--primary)}
aside.nav .brand{display:flex;align-items:center;gap:8px;padding:0 8px 20px;border-bottom:1px solid var(--border);margin-bottom:16px}
aside.nav .brand b{font-size:1.077rem;font-weight:700;letter-spacing:-.01em}
aside.nav .brand .logo{width:24px;height:auto;display:block;color:var(--primary);flex:none}
aside.nav .brand .ph{margin-left:auto;font-size:.769rem;color:var(--muted-fg);font-family:var(--font-mono);text-transform:uppercase}
aside.nav .foot{margin-top:auto;display:flex;gap:6px;padding-top:16px;border-top:1px solid var(--border)}
aside.nav .foot button{flex:1;font-family:inherit;font-size:.846rem;padding:6px 10px;border-radius:6px;background:var(--muted);color:var(--foreground);cursor:pointer;border:1px solid var(--border)}
aside.nav .foot button.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
main.doc-main,body > .shell > main{padding:32px 40px 80px;max-width:1080px}

@media(max-width:1024px){
  .shell,.doc-shell{grid-template-columns:1fr}
  aside.nav,.doc-nav{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--border);flex-direction:row;flex-wrap:wrap;overflow:visible;padding:12px 16px;gap:2px}
  aside.nav h4,.doc-nav h4{display:none}
  aside.nav .brand,.doc-nav .brand{border:0;padding-bottom:0;margin:0;width:100%}
  aside.nav a,.doc-nav a{padding:4px 8px;font-size:.846rem}
  aside.nav .foot,.doc-nav .foot{margin:0;border:0;padding:0;width:auto}
  main.doc-main,body > .shell > main,.doc-main{padding:20px}
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/.pnpm/next@15.4.11_react-dom@19.2.4_react@19.2.4__react@19.2.4_sass@1.77.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/components/catalog/catalog.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ==========================================================
   Dictover catalog — screen-level styles for the T4 catalog.
   Built on the plusengine-design-system tokens + atoms/molecules
   (components.css). Only Dictover-specific composites live here:
   the recordings list table, entity grids, the transcript reader.
   ========================================================== */

/* ---------- shared page rhythm ---------- */
.cat-section { margin-top: 20px; }
.cat-section:first-of-type { margin-top: 16px; }
.cat-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-fg); font-family: var(--font-mono);
  margin-bottom: 8px;
}

/* ---------- recordings list table ---------- */
.rec-table {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.rec-row {
  display: grid;
  grid-template-columns: 1fr 160px 110px 120px;
  align-items: center; gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background var(--motion-fast) var(--motion-ease);
}
.rec-row:last-child { border-bottom: 0; }
.rec-row:hover { background: var(--surface-3); }
.rec-row.rec-head {
  background: var(--surface-2);
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-fg); cursor: default;
  font-family: var(--font-mono);
}
.rec-row.rec-head:hover { background: var(--surface-2); }
.rec-title {
  min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.rec-title .t {
  font-size: var(--text-base); font-weight: 500; color: var(--foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-title .sub {
  font-size: var(--text-xs); color: var(--muted-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-cell {
  font-size: var(--text-sm); color: var(--muted-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .rec-row { grid-template-columns: 1fr 96px; }
  .rec-row .rec-cell.hide-sm { display: none; }
}

/* ---------- entity grid (people / sources / types / collections) ---------- */
.ent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ent-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.ent-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.ent-ico {
  width: 38px; height: 38px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  color: var(--primary);
}
.ent-ico .i { width: 18px; height: 18px; }
.ent-ico.sq { border-radius: var(--radius-md); }
.ent-body { min-width: 0; flex: 1; }
.ent-name {
  font-size: var(--text-base); font-weight: 500; color: var(--foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ent-meta {
  font-size: var(--text-xs); color: var(--muted-fg); margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}

/* ---------- collection tree ---------- */
.col-tree { display: flex; flex-direction: column; gap: 4px; }
.col-tree .col-node-row { display: flex; flex-direction: column; gap: 4px; }
.col-node {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  text-decoration: none; color: inherit;
  transition: background var(--motion-fast) var(--motion-ease);
}
.col-node:hover { background: var(--surface-3); }
.col-node .i { width: 15px; height: 15px; color: var(--muted-fg); flex: none; }
.col-node .nm {
  flex: 1; min-width: 0; font-size: var(--text-base); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-children {
  margin-left: 18px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}

/* ---------- detail: two-column (main + side) ---------- */
.dt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px; align-items: start;
}
@media (max-width: 960px) {
  .dt-grid { grid-template-columns: 1fr; }
}
.dt-side { display: flex; flex-direction: column; gap: 16px; }

/* ---------- transcript reader ---------- */
.tx { display: flex; flex-direction: column; gap: 16px; }
.tx-block {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}
.tx-speaker {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.tx-speaker-name {
  font-size: var(--text-sm); font-weight: 600; color: var(--foreground);
}
.tx-turns { display: flex; flex-direction: column; gap: 6px; }
.tx-turn {
  font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--foreground);
  display: flex; gap: 8px; align-items: baseline;
}
.tx-ts {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--muted-fg); flex: none;
  font-variant-numeric: tabular-nums;
}
.tx-empty {
  font-size: var(--text-sm); color: var(--muted-fg);
  padding: 24px; text-align: center;
  background: var(--surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
}

/* ---------- search results ---------- */
.sr-list { display: flex; flex-direction: column; gap: 10px; }
.sr-item {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 14px 16px;
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.sr-item:hover { border-color: var(--border-strong); }
.sr-top { display: flex; align-items: center; gap: 8px; }
.sr-title { font-size: var(--text-md); font-weight: 600; color: var(--foreground); }
.sr-snippet {
  font-size: var(--text-sm); color: var(--muted-fg);
  margin-top: 6px; line-height: var(--leading-normal);
}
.sr-snippet mark {
  background: color-mix(in oklch, var(--primary) 22%, transparent);
  color: var(--foreground); border-radius: 3px; padding: 0 2px;
}
.sr-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--text-xs); color: var(--muted-fg);
  margin-top: 8px;
}

/* ---------- misc ---------- */
.cat-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cat-link { color: var(--primary); text-decoration: none; }
.cat-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.cat-muted { color: var(--muted-fg); }
.cat-stack { display: flex; flex-direction: column; gap: 6px; }