@layer base {
  :root {
    color-scheme: dark;
    --c-abyss: 5 9 16;
    --c-amber: 252 211 77;
    --c-black: 0 0 0;
    --c-blue: 59 130 246;
    --c-blue-deep: 30 58 138;
    --c-blue-mid: 96 165 250;
    --c-blue-wash: 219 234 254;
    --c-body: 11 18 34;
    --c-crimson: 239 68 68;
    --c-cyan: 56 189 248;
    --c-cyan-deep: 14 165 233;
    --c-deep: 2 6 23;
    --c-emerald: 22 163 74;
    --c-gray: 71 85 105;
    --c-green: 34 197 94;
    --c-green-dark: 22 101 52;
    --c-green-deep: 6 95 70;
    --c-ice: 241 245 249;
    --c-mint: 52 211 153;
    --c-mint-pale: 167 243 208;
    --c-mint-wash: 220 252 231;
    --c-navy: 15 23 42;
    --c-navy-mid: 30 41 59;
    --c-notice-bg: 10 15 25;
    --c-ocean: 2 132 199;
    --c-ocean-deep: 3 105 161;
    --c-orange: 251 146 60;
    --c-red: 248 113 113;
    --c-red-dark: 127 29 29;
    --c-red-deep: 153 27 27;
    --c-rose: 251 113 133;
    --c-rose-hot: 244 63 94;
    --c-rose-wash: 254 226 226;
    --c-scarlet: 220 38 38;
    --c-shadow: 8 15 35;
    --c-shadow-blue: 8 47 73;
    --c-silver: 203 213 225;
    --c-slate: 148 163 184;
    --c-slate-dark: 100 116 139;
    --c-slate-light: 226 232 240;
    --c-snow: 248 250 252;
    --c-teal: 6 182 212;
    --c-white: 255 255 255;
    --black-8: rgb(var(--c-black) / 8%);
    --black-10: rgb(var(--c-black) / 10%);
    --black-25: rgb(var(--c-black) / 25%);
    --black-90: rgb(var(--c-black) / 90%);
    --blue-20: rgb(var(--c-blue) / 20%);
    --blue-55: rgb(var(--c-blue) / 55%);
    --blue-deep-85: rgb(var(--c-blue-deep) / 85%);
    --blue-mid-35: rgb(var(--c-blue-mid) / 35%);
    --blue-wash-95: rgb(var(--c-blue-wash) / 95%);
    --crimson-12: rgb(var(--c-crimson) / 12%);
    --crimson-35: rgb(var(--c-crimson) / 35%);
    --cyan-10: rgb(var(--c-cyan) / 10%);
    --cyan-15: rgb(var(--c-cyan) / 15%);
    --cyan-25: rgb(var(--c-cyan) / 25%);
    --cyan-30: rgb(var(--c-cyan) / 30%);
    --cyan-35: rgb(var(--c-cyan) / 35%);
    --cyan-45: rgb(var(--c-cyan) / 45%);
    --cyan-60: rgb(var(--c-cyan) / 60%);
    --cyan-deep-15: rgb(var(--c-cyan-deep) / 15%);
    --cyan-deep-25: rgb(var(--c-cyan-deep) / 25%);
    --deep-70: rgb(var(--c-deep) / 70%);
    --gray-85: rgb(var(--c-gray) / 85%);
    --green-12: rgb(var(--c-green) / 12%);
    --green-18: rgb(var(--c-green) / 18%);
    --green-25: rgb(var(--c-green) / 25%);
    --green-30: rgb(var(--c-green) / 30%);
    --green-35: rgb(var(--c-green) / 35%);
    --green-dark-85: rgb(var(--c-green-dark) / 85%);
    --ice-90: rgb(var(--c-ice) / 90%);
    --ice-95: rgb(var(--c-ice) / 95%);
    --mint-wash-95: rgb(var(--c-mint-wash) / 95%);
    --navy-35: rgb(var(--c-navy) / 35%);
    --navy-55: rgb(var(--c-navy) / 55%);
    --navy-65: rgb(var(--c-navy) / 65%);
    --navy-80: rgb(var(--c-navy) / 80%);
    --navy-88: rgb(var(--c-navy) / 88%);
    --navy-92: rgb(var(--c-navy) / 92%);
    --navy-mid-78: rgb(var(--c-navy-mid) / 78%);
    --ocean-8: rgb(var(--c-ocean) / 8%);
    --ocean-12: rgb(var(--c-ocean) / 12%);
    --ocean-15: rgb(var(--c-ocean) / 15%);
    --ocean-25: rgb(var(--c-ocean) / 25%);
    --ocean-35: rgb(var(--c-ocean) / 35%);
    --ocean-50: rgb(var(--c-ocean) / 50%);
    --red-12: rgb(var(--c-red) / 12%);
    --red-25: rgb(var(--c-red) / 25%);
    --red-30: rgb(var(--c-red) / 30%);
    --red-35: rgb(var(--c-red) / 35%);
    --red-dark-85: rgb(var(--c-red-dark) / 85%);
    --rose-wash-95: rgb(var(--c-rose-wash) / 95%);
    --shadow-45: rgb(var(--c-shadow) / 45%);
    --shadow-blue-28: rgb(var(--c-shadow-blue) / 28%);
    --shadow-blue-45: rgb(var(--c-shadow-blue) / 45%);
    --silver-45: rgb(var(--c-silver) / 45%);
    --silver-50: rgb(var(--c-silver) / 50%);
    --silver-60: rgb(var(--c-silver) / 60%);
    --slate-18: rgb(var(--c-slate) / 18%);
    --slate-25: rgb(var(--c-slate) / 25%);
    --slate-35: rgb(var(--c-slate) / 35%);
    --slate-50: rgb(var(--c-slate) / 50%);
    --slate-75: rgb(var(--c-slate) / 75%);
    --slate-dark-75: rgb(var(--c-slate-dark) / 75%);
    --slate-light-75: rgb(var(--c-slate-light) / 75%);
    --snow-70: rgb(var(--c-snow) / 70%);
    --snow-95: rgb(var(--c-snow) / 95%);
    --teal-15: rgb(var(--c-teal) / 15%);
    --teal-40: rgb(var(--c-teal) / 40%);
    --white-10: rgb(var(--c-white) / 10%);
    --white-35: rgb(var(--c-white) / 35%);
    --white-60: rgb(var(--c-white) / 60%);
    --white-80: rgb(var(--c-white) / 80%);
    --white-85: rgb(var(--c-white) / 85%);
    --white-90: rgb(var(--c-white) / 90%);
    --white-98: rgb(var(--c-white) / 98%);
    --abyss: rgb(var(--c-abyss));
    --blue: rgb(var(--c-blue));
    --blue-deep: rgb(var(--c-blue-deep));
    --blue-wash: rgb(var(--c-blue-wash));
    --body: rgb(var(--c-body));
    --cyan: rgb(var(--c-cyan));
    --cyan-deep: rgb(var(--c-cyan-deep));
    --emerald: rgb(var(--c-emerald));
    --green-deep: rgb(var(--c-green-deep));
    --ice: rgb(var(--c-ice));
    --mint-wash: rgb(var(--c-mint-wash));
    --navy: rgb(var(--c-navy));
    --navy-mid: rgb(var(--c-navy-mid));
    --notice-bg: rgb(var(--c-notice-bg));
    --ocean: rgb(var(--c-ocean));
    --ocean-deep: rgb(var(--c-ocean-deep));
    --red-deep: rgb(var(--c-red-deep));
    --rose-wash: rgb(var(--c-rose-wash));
    --scarlet: rgb(var(--c-scarlet));
    --slate-light: rgb(var(--c-slate-light));
    --snow: rgb(var(--c-snow));
    --white: rgb(var(--c-white));
    --accent: var(--cyan);
    --accent-strong: var(--cyan-deep);
    --amber: rgb(var(--c-amber));
    --border: var(--cyan-25);
    --border-glow: var(--cyan-25);
    --color-accent: var(--blue);
    --color-danger: var(--scarlet);
    --color-success: var(--emerald);
    --glass-border: var(--slate-18);
    --mint: rgb(var(--c-mint));
    --mint-soft: rgb(var(--c-mint-pale));
    --orange: rgb(var(--c-orange));
    --red: rgb(var(--c-crimson));
    --rose: rgb(var(--c-rose));
    --rose-light: rgb(var(--c-red));
    --rose-strong: rgb(var(--c-rose-hot));
    --shadow-card: 0 12px 40px var(--shadow-45);
    --shadow-soft: 0 20px 70px var(--shadow-45);
    --sky: rgb(var(--c-blue-mid));
    --surface: var(--navy-88);
    --surface-card: var(--navy-92);
    --text-muted: var(--slate-75);
    --text-primary: var(--snow);
    --text-secondary: var(--slate-light-75);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    min-height: 100dvh;
    font-family:
      Manrope,
      'Segoe UI',
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
    color: var(--text-primary);
    background-color: var(--body);
    overscroll-behavior-y: none;
    transition:
      color 0.3s ease,
      background-color 0.3s ease;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at top left, var(--navy-mid), var(--body) 55%, var(--abyss) 100%);
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient(circle at top left, var(--ice), var(--slate-light) 55%, var(--snow) 100%);
    pointer-events: none;
  }

  [data-theme='light'] body::before {
    opacity: 0;
  }

  html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  html::-webkit-scrollbar {
    width: 8px;
  }

  html::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }

  html::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .main {
    flex: 1;
    width: min(1100px, 90%);
    margin: 0 auto;
    padding-bottom: 4rem;
  }

  .main-centered {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav {
    position: relative;
    z-index: 200;
    width: min(1100px, 90%);
    margin: 2.5rem auto 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.6rem 2.1rem;
    border-radius: 18px;
    backdrop-filter: blur(24px);
    background: linear-gradient(120deg, var(--navy-mid-78), var(--navy-92));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .nav-brand {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    gap: 0.4rem;
    max-width: 100%;
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
  }

  .nav-accent {
    flex-shrink: 0;
    width: 12px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    box-shadow: 0 0 18px var(--cyan-60);
  }

  .nav-title {
    font-size: clamp(1.45rem, 2.5vw, 1.8rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .nav-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .nav-fixed {
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-left: auto;
    order: 2;
  }

  .nav-wrap {
    flex: 1 1 auto;
    justify-content: flex-end;
    order: 1;
  }

  .nav-link {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    transition:
      color 0.2s ease,
      background 0.2s ease;
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    color: var(--text-primary);
    background: var(--cyan-15);
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  .nav-avatar-link {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: 50%;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    transition: background 0.2s ease;
  }

  .nav-avatar-link:hover,
  .nav-avatar-link:focus-visible {
    background: var(--cyan-15);
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  .nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .section-header {
    margin: 3.5rem 0 2rem;
  }

  summary.section-header {
    cursor: pointer;
    list-style: none;
  }

  summary.section-header::-webkit-details-marker {
    display: none;
  }

  summary.section-header h2::after,
  .tree-toggle::after {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  details[open] > summary.section-header h2::after,
  .tree-toggle.expanded::after {
    transform: rotate(225deg);
  }

  details:not([open]) > summary.section-header {
    margin-bottom: 0;
  }

  .section-header h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.7rem, 2.8vw, 2.1rem);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
  }

  .section-header h2::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    box-shadow: 0 0 18px var(--cyan-45);
    border: 1px solid var(--white-35);
  }

  .section-header p {
    margin: 0;
    color: var(--text-secondary);
    max-width: 640px;
    line-height: 1.6;
    font-size: 1.05rem;
  }

  .section-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .section-meta a {
    color: inherit;
  }

  .section-header .section-description {
    margin-top: 0.55rem;
    max-width: none;
    font-size: 0.9rem;
  }

  .section-description a {
    color: inherit;
  }

  input,
  textarea,
  select {
    font-family: inherit;
    font-weight: 400;
    outline: none;
    border-radius: 12px;
    border: 1px solid var(--slate-25);
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    background: var(--navy-65);
    color: var(--text-primary);
  }

  textarea {
    resize: vertical;
    min-height: 2.75rem;
    max-height: 60vh;
    field-sizing: content;
    overflow-y: auto;
  }

  .toggle {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  .toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--red-12);
    border: 1px solid var(--red-35);
    transition:
      background 0.2s ease,
      border-color 0.2s ease;
    cursor: pointer;
  }

  .toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--rose-light);
    transition:
      transform 0.2s ease,
      background 0.2s ease;
  }

  .toggle input:checked + .toggle-track {
    background: var(--green-12);
    border-color: var(--green-35);
  }

  .toggle input:checked + .toggle-track::after {
    transform: translateX(1.25rem);
    background: var(--mint);
  }

  .section-search {
    margin: 0.5rem 0 0;
  }

  .section-search input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    width: 260px;
    max-width: 100%;
    outline: none;
    transition: border-color 0.15s;
  }

  .section-search input:focus {
    border-color: var(--accent);
  }

  .sections {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
  }

  .hero {
    position: relative;
    padding: 4rem 0 3rem;
  }

  .hero-background {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background:
      radial-gradient(circle at 20% 20%, var(--cyan-30), transparent 50%),
      radial-gradient(circle at 80% 0%, var(--cyan-deep-25), transparent 45%),
      linear-gradient(160deg, var(--navy-88), var(--navy-65));
    border: 1px solid var(--cyan-15);
    box-shadow: 0 24px 80px var(--cyan-deep-25);
    z-index: 0;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    padding: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.6rem;
    flex-wrap: wrap;
  }

  .hero-copy {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .hero-eyebrow {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: var(--slate-75);
  }

  .hero-greeting {
    margin: 0;
    font-size: clamp(3.1rem, 6vw, 3.9rem);
    line-height: 1.05;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
  }

  .hero-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .hero-media {
    flex: 0 0 auto;
    width: clamp(140px, 18vw, 190px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 6px;
    background:
      radial-gradient(circle at 35% 25%, var(--blue-55), transparent 65%),
      radial-gradient(circle at 70% 70%, var(--teal-40), transparent 60%), var(--navy-92);
    border: 1px solid var(--cyan-35);
    box-shadow: 0 25px 60px var(--ocean-35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .hero-media::after {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px solid var(--slate-25);
    pointer-events: none;
  }

  .hero-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 12px 30px var(--navy-35);
  }

  .list {
    margin: 2.8rem auto 0;
  }

  .list-empty {
    margin: 1.6rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
  }

  .list-items {
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .list-item {
    display: grid;
    grid-template-columns: minmax(0, 20%) 1fr auto;
    align-items: center;
    gap: 0 0.6rem;
    padding: 1.1rem 1.35rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    transition:
      background 0.2s ease,
      border-color 0.2s ease;
    cursor: pointer;
  }

  .list-item.has-icon {
    grid-template-columns: auto minmax(0, 20%) 1fr auto;
  }

  .list-item.has-check {
    grid-template-columns: auto minmax(0, 20%) 1fr auto;
  }

  .list-item.has-check.has-icon {
    grid-template-columns: auto auto minmax(0, 20%) 1fr auto;
  }

  .list-item.selected {
    border-color: var(--cyan-45);
    background: var(--cyan-10);
    box-shadow:
      0 0 0 1px var(--cyan-25),
      var(--shadow-soft);
  }

  .list-item.focused {
    border-color: var(--cyan-60);
    box-shadow:
      0 0 0 2px var(--cyan-35),
      var(--shadow-soft);
  }

  .list-items.as-cards {
    display: grid;
    grid-template-columns: var(--list-cols, repeat(3, minmax(0, 1fr)));
    gap: 1.4rem;
  }

  .list-body {
    display: contents;
  }

  .list-items.as-cards .list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1.7rem 1.5rem minmax(0, 1fr) 2.5rem;
    column-gap: 0.9rem;
    row-gap: 0.15rem;
    position: relative;
    padding: 1.6rem 1.7rem;
    background: var(--surface-card);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    height: 13rem;
    min-width: 0;
  }

  .list-items.as-cards .list-item.has-check::after {
    content: '';
    grid-column: 1;
    grid-row: 1 / 3;
    width: 0;
    min-height: 3.5rem;
  }

  .list-items.as-cards .list-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid var(--border-glow);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .list-items.as-cards .list-item:hover::before {
    opacity: 1;
  }

  .list-items.as-cards .list-item .list-body,
  .list-items.as-cards .list-item .list-secondary {
    display: contents;
  }

  .list-items.as-cards .list-item:not(.has-check):not(:has(.list-picture, .list-icon)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .list-items.as-cards .list-item:not(.has-check):not(:has(.list-picture, .list-icon)) .list-route,
  .list-items.as-cards .list-item:not(.has-check):not(:has(.list-picture, .list-icon)) .list-identity {
    grid-column: 1;
  }

  .list-items.as-cards .list-item.has-check {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .list-items.as-cards .list-item.has-check .list-check {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    margin-right: -0.3rem;
  }

  .list-items.as-cards .list-item.has-check .list-picture,
  .list-items.as-cards .list-item.has-check .list-icon {
    grid-column: 2;
  }

  .list-items.as-cards .list-item.has-check .list-route,
  .list-items.as-cards .list-item.has-check .list-identity {
    grid-column: 3;
  }

  .list-items.as-cards .list-item .list-picture,
  .list-items.as-cards .list-item .list-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    margin-bottom: 0;
    border-radius: 50%;
  }

  .list-items.as-cards .list-item .list-picture {
    object-fit: cover;
    border: 1px solid var(--slate-25);
    box-shadow: 0 6px 20px var(--navy-35);
  }

  .list-items.as-cards .list-item .list-route {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    overflow-wrap: anywhere;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-items.as-cards .list-item:not(:has(.list-subtitle)) .list-route {
    grid-row: 1 / 3;
    align-self: center;
  }

  .list-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
  }

  .list-items.as-cards .list-item .list-identity {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    text-align: left;
  }

  .list-identity .list-subtitle {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-items.as-cards .list-item .list-description {
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: end;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .list-paragraph {
    display: block;
    margin-top: 0.35rem;
  }

  .list-items.as-cards .list-item .list-paragraphs {
    text-align: left;
  }

  .list-items.as-cards .list-item .list-meta {
    grid-column: 1 / -1;
  }

  .list-items.as-cards .list-item .list-buttons {
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: end;
    margin-top: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  .list-picture {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
  }

  .list-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
  }

  .list-secondary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0.1rem;
    min-width: 0;
    overflow: hidden;
  }

  .list-secondary .list-subtitle,
  .list-secondary .list-description {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .list-item.list-pending {
    cursor: default;
    opacity: 0.85;
    filter: grayscale(0.3);
    pointer-events: none;
  }

  .marquee {
    position: fixed;
    z-index: 1000;
    border: 1px solid var(--accent);
    background: var(--cyan-15);
    pointer-events: none;
  }

  .list-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2.5rem 0 1rem;
  }

  .list-footer .pagination {
    margin: 0;
  }

  .list-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--slate-35);
    background: transparent;
    flex: 0 0 auto;
    cursor: pointer;
    transition:
      background 0.15s ease,
      border-color 0.15s ease;
    position: relative;
  }

  .list-check:hover {
    border-color: var(--accent);
  }

  .list-item.selected .list-check {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
  }

  .list-item.selected .list-check::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .list-route {
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 1rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .list-route:has(.color-dot) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .color-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color);
    flex-shrink: 0;
  }

  .list-item [data-toggle-section-visible] {
    margin-left: auto;
  }

  .list-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--navy-65);
    border: 1px solid var(--slate-25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 1.1rem;
    flex: 0 0 auto;
  }

  .list-icon-img {
    transition: opacity 0.2s ease;
  }

  [data-theme='light'] .list-icon {
    background: var(--white-80);
  }

  .list-icon-img svg,
  .list-icon-img img {
    width: 28px;
    height: 28px;
    display: block;
  }

  .list-icon.has-thumb .list-icon-img {
    opacity: 0;
  }

  .list-icon > img,
  .list-icon > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .list-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
  }

  .tree-item .list-buttons,
  .tree-leaf .list-buttons {
    margin-left: auto;
    flex: 0 0 auto;
  }

  .list-item.list-item-info .list-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, max-content));
    justify-content: end;
    gap: 0.5rem;
  }

  .media-viewer {
    width: 100%;
    margin-top: 0.6rem;
    display: flex;
    justify-content: center;
  }

  .media-viewer img,
  .media-viewer video {
    max-width: 100%;
    border-radius: 16px;
    border: 1px solid var(--slate-25);
    box-shadow: var(--shadow-soft);
  }

  .media-viewer audio {
    width: min(520px, 100%);
  }

  .media-viewer img {
    cursor: pointer;
  }

  .pdf-viewer {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin-top: 0.6rem;
    min-width: 0;
  }

  .pdf-viewer iframe {
    width: 100%;
    height: 80vh;
    border: 1px solid var(--slate-25);
    border-radius: 16px;
    background: var(--surface-card);
    box-shadow: var(--shadow-soft);
  }

  .pdf-open {
    position: absolute;
    inset: 0;
    cursor: zoom-in;
    border-radius: 16px;
  }

  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--black-90);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
  }

  .content-nav-wrap {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
  }

  .content-nav-wrap > .media-viewer,
  .content-nav-wrap > .pdf-viewer,
  .content-nav-wrap > .config-form,
  .content-nav-wrap > .unsupported-viewer {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-arrow {
    flex: 0 0 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--slate-50);
    text-decoration: none;
    font-size: 2rem;
    line-height: 1;
    user-select: none;
    transition:
      background 140ms ease,
      color 140ms ease;
  }

  .nav-arrow > span {
    display: block;
    transform: scaleX(0.5);
    opacity: 0.85;
    transition:
      opacity 140ms ease,
      transform 140ms ease;
  }

  .nav-arrow:hover {
    background: var(--slate-18);
    color: var(--text-primary);
  }

  .nav-arrow:hover > span {
    opacity: 1;
  }

  .nav-arrow.nav-arrow-prev:hover > span {
    transform: translateX(-2px) scaleX(0.5);
  }

  .nav-arrow.nav-arrow-next:hover > span {
    transform: translateX(2px) scaleX(0.5);
  }

  .nav-arrow.is-disabled {
    pointer-events: none;
  }

  .nav-arrow.is-disabled > span {
    opacity: 0.25;
  }

  .pagination .nav-arrow {
    height: 2.4rem;
    font-size: 1.4rem;
    border-radius: 10px;
  }

  .unsupported-viewer {
    margin-top: 0.6rem;
    padding: 2.4rem 1.6rem;
    border-radius: 16px;
    border: 1px dashed var(--slate-25);
    background: var(--surface-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
  }

  .unsupported-title {
    margin: 0;
    font-weight: 600;
    font-size: 1.05rem;
  }

  .unsupported-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 32rem;
  }

  .cards-item {
    position: relative;
    background: var(--surface-card);
    border-radius: 20px;
    padding: 2.1rem 2rem 2rem;
    border: 1px solid var(--cyan-10);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    transition: box-shadow 0.25s ease;
    color: var(--text-primary);
  }

  .cards-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid var(--border-glow);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .cards-item:hover::before {
    opacity: 1;
  }

  .dialog::before {
    display: none;
  }

  .cards-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
  }

  .cards-description {
    margin: 0.6rem 0 0;
    color: var(--text-secondary);
    line-height: 1.65;
  }

  .control-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem 1rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .control-row h2 {
    margin-bottom: 0;
  }

  .control-group {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
  }

  .control-row > .control-group:first-child {
    flex: 1 1 0;
    overflow: hidden;
  }

  .control-row > .control-group:last-child {
    flex-shrink: 0;
  }

  .control-row > .control-group:only-child {
    justify-content: flex-end;
  }

  .control-row > .control-group:has(.dropdown) {
    overflow: visible;
    padding-block: 0.25rem;
  }

  .control-group .section-search {
    margin: 0;
  }

  .control-row.list-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .list-controls > .section-meta {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
  }

  .control-row.list-controls > .control-group {
    flex: 0 0 auto;
    justify-content: flex-end;
    overflow: visible;
  }

  .share-holders {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.4rem;
  }

  .share-participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .share-recipient-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .share-recipient-header .dialog-input {
    flex: 1;
    min-width: 0;
    width: auto;
    margin: 0;
  }

  .share-recipient-header .styled-select {
    flex: 0 0 auto;
    width: auto;
  }

  .share-participant-name {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .share-participant-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .list-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--white-10);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .status-badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease,
      background 0.15s ease;
  }

  .status-ready {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    cursor: pointer;
  }

  .status-ready:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-success) 25%, transparent);
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-success) 30%, transparent);
  }

  .status-building {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    cursor: default;
  }

  .status-owner {
    color: var(--sky);
    background: color-mix(in srgb, var(--blue) 12%, transparent);
    cursor: default;
  }

  .status-error {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    cursor: pointer;
  }

  .status-error:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-danger) 25%, transparent);
    border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-danger) 30%, transparent);
  }

  .button-step {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
  }

  .cards-item:hover {
    box-shadow: 0 16px 50px var(--ocean-25);
  }

  .config-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .config-textarea {
    width: 100%;
    min-height: 900px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    field-sizing: fixed;
    overflow-y: auto;
  }

  .lines-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
  }

  .line-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .line-row {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(0, 5fr) auto;
    gap: 0.6rem;
    align-items: center;
  }

  .button,
  button,
  .action-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.4rem 0.95rem;
    background: var(--cyan-10);
    color: var(--accent);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    transition:
      color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease;
  }

  [hidden] {
    display: none !important;
  }

  .action-select {
    appearance: none;
    display: inline-block;
    outline: none;
    height: auto;
    line-height: normal;
    text-align: center;
  }

  .action-select:focus,
  .action-select:focus-visible {
    outline: none;
  }

  .button:hover,
  .button:focus-visible,
  .file-input:has(> input:focus-visible),
  button:hover,
  button:focus-visible,
  .action-select:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
    background: var(--cyan-25);
    border-color: var(--cyan-35);
    box-shadow: 0 14px 36px var(--cyan-30);
  }

  .button:disabled,
  button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
    transform: none;
  }

  span.button,
  span.button:hover {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    cursor: default;
    transform: none;
    border-color: transparent;
    box-shadow: none;
  }

  a:focus,
  button:focus {
    outline: none;
  }

  button.line-remove {
    background: var(--red-12);
    color: var(--rose-light);
  }

  button.line-remove:hover,
  button.line-remove:focus-visible {
    background: var(--red-25);
    border-color: var(--red-35);
    color: var(--rose-wash);
    box-shadow: 0 14px 36px var(--red-30);
  }

  .button-success {
    background: var(--green-12);
    color: var(--mint);
  }

  .button-success:hover,
  .button-success:focus-visible {
    background: var(--green-25);
    border-color: var(--green-35);
    color: var(--mint-wash);
    box-shadow: 0 14px 36px var(--green-30);
  }

  .notice {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 1200;
    width: min(560px, calc(100vw - 2rem));
    padding: 1rem 1.4rem;
    border-radius: 18px;
    border: 1px solid var(--slate-18);
    background: var(--notice-bg);
    color: var(--text-primary);
    box-shadow: 0 12px 40px var(--shadow-blue-28);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .notice > span {
    flex: 1;
    min-width: 0;
  }

  .notice-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    animation: notice-slide 0.25s ease;
  }

  @keyframes notice-slide {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  .notice-error {
    background: var(--red-dark-85);
    border-color: var(--red-35);
    color: var(--rose-wash);
  }

  .notice-success {
    background: var(--green-dark-85);
    border-color: var(--green-30);
    color: var(--mint-wash);
  }

  .notice-info {
    background: var(--blue-deep-85);
    border-color: var(--blue-mid-35);
    color: var(--blue-wash);
  }

  .notice-progress {
    padding-top: calc(1rem + 4px);
  }

  .notice-cancel {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
  }

  .notice-cancel:hover {
    opacity: 1;
    background: none;
  }

  .notice-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
  }

  .notice-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.15s;
    border-radius: 18px 0 0;
  }

  .notice-stack {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: min(560px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
  }

  .notice-stack > .notice {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    z-index: auto;
    pointer-events: auto;
  }

  .notice-stack > .notice-visible {
    transform: none;
    animation: notice-stack-slide 0.25s ease;
  }

  @keyframes notice-stack-slide {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .global-notice {
    padding: 0.75rem 1.4rem;
    border-radius: 18px;
    border: 1px solid var(--slate-18);
    background: var(--notice-bg);
    color: var(--text-primary);
    margin: 0 auto 1rem;
    max-width: min(1100px, 90vw);
    width: calc(100% - 3rem);
    text-align: center;
  }

  .global-notice-error {
    background: var(--red-dark-85);
    border-color: var(--red-35);
    color: var(--rose-wash);
  }

  .global-notice-success {
    background: var(--green-dark-85);
    border-color: var(--green-30);
    color: var(--mint-wash);
  }

  .global-notice-info {
    background: var(--blue-deep-85);
    border-color: var(--blue-mid-35);
    color: var(--blue-wash);
  }

  .dialog-overlay {
    position: fixed;
    inset: 0;
    background: var(--deep-70);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
  }

  .dropdown {
    position: relative;
    display: inline-flex;
  }

  .dropdown-trigger {
    cursor: pointer;
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.35rem;
    min-width: 9rem;
    border-radius: 12px;
    background: var(--navy);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    padding: 0.35rem;
    z-index: 200;
    display: none;
  }

  .dropdown-menu.dropdown-open {
    display: block;
  }

  .dropdown-menu.dropdown-above {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.35rem;
  }

  .dropdown-actions {
    padding: 0.35rem;
  }

  .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition:
      background 0.15s ease,
      color 0.15s ease;
  }

  .dropdown-item:hover {
    background: var(--cyan-10);
    color: var(--text-primary);
  }

  .dropdown-item.dropdown-active {
    font-weight: 600;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }

  .styled-select {
    position: relative;
    width: 100%;
  }

  .styled-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-weight: 400;
    border-radius: 12px;
    border: 1px solid var(--slate-25);
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    background: var(--navy-65);
    color: var(--text-primary);
  }

  .styled-select .styled-select-trigger:focus-visible,
  .styled-select .dropdown-item:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .styled-select .dropdown-item {
    font-weight: 400;
  }

  .styled-select-trigger::after {
    content: '\25BE';
    opacity: 0.5;
    font-size: 0.8em;
    margin-left: 0.5rem;
  }

  .styled-select .dropdown-menu {
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  .styled-select .dropdown-menu.dropdown-open {
    position: fixed;
    right: auto;
    bottom: auto;
    margin: 0;
    z-index: 1001;
  }

  html.dialog-open,
  html.dialog-open body {
    overflow: hidden;
  }

  .dialog-overlay,
  .dialog-body,
  .dialog-message {
    overscroll-behavior: contain;
  }

  .dialog:focus {
    outline: none;
  }

  .dialog {
    width: min(520px, 92vw);
    margin: auto;
    box-shadow: 0 24px 80px var(--shadow-blue-45);
  }

  .dialog-wide {
    width: min(600px, 92vw);
  }

  .dialog-share {
    width: min(720px, 94vw);
  }

  .dialog-scrollable {
    max-height: calc(100vh - 3rem);
  }

  .dialog-scrollable .dialog-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .dialog-scrollable .dialog-body {
    margin: 0;
    padding: 1.5rem 4px 1rem;
    overflow-y: auto;
    min-height: 0;
  }

  .dialog-scrollable .cards-title,
  .dialog-scrollable .dialog-actions {
    flex-shrink: 0;
  }

  .dialog-message {
    white-space: pre-line;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  .dialog-message::-webkit-scrollbar,
  .search-results::-webkit-scrollbar {
    width: 6px;
  }

  .dialog-message::-webkit-scrollbar-track,
  .search-results::-webkit-scrollbar-track {
    background: transparent;
  }

  .dialog-message::-webkit-scrollbar-thumb,
  .search-results::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

  .dialog-input {
    width: 100%;
    margin-top: 0.75rem;
  }

  .file-input {
    position: relative;
    max-width: 100%;
    overflow: hidden;
  }

  .file-input > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .file-input > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .file-input:has(input:disabled) {
    pointer-events: none;
    opacity: 0.55;
  }

  .control-row > .dialog-input {
    margin-top: 0;
  }

  .dialog-input[type='number'] {
    appearance: textfield;
  }

  .dialog-input[type='number']::-webkit-inner-spin-button,
  .dialog-input[type='number']::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .dialog-body {
    margin: 1rem 0;
    padding: 0 4px;
  }

  .dialog-field {
    margin-bottom: 1rem;
  }

  .dialog-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 700;
  }

  .dialog-field:has(> .file-input) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .dialog-field:has(> .file-input) > label {
    margin: 0;
  }

  .dialog-field > .file-input {
    min-width: 0;
  }

  .dialog-field-unlabelled {
    margin-bottom: 0.5rem;
  }

  .dialog-field-unlabelled .dialog-input {
    margin-top: 0;
  }

  .dialog-field:has(input[type='color']) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .dialog-field:has(input[type='color']) label {
    margin: 0;
  }

  .dialog-field input[type='color'] {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    appearance: none;
  }

  .dialog-field input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  .dialog-field input[type='color']::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
  }

  .dialog-field input[type='color']::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
  }

  .dialog-field textarea {
    width: 100%;
    min-height: 3rem;
    box-sizing: border-box;
  }

  input:disabled,
  textarea:disabled,
  select:disabled,
  .styled-select-trigger:disabled,
  input[readonly],
  textarea[readonly],
  .dialog-readonly {
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
  }

  .styled-select-trigger:disabled {
    opacity: 1;
  }

  input:disabled,
  textarea:disabled,
  select:disabled {
    cursor: not-allowed;
  }

  input[readonly],
  textarea[readonly] {
    cursor: text;
    user-select: text;
  }

  .line-row textarea {
    field-sizing: fixed;
  }

  .dialog-separator {
    width: 100%;
    height: 0;
    margin: 0.35rem 0;
    border: 0;
    border-top: 1px solid var(--slate-25);
  }

  .dialog-readonly {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--slate-25);
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    background: var(--navy-65);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: text;
    user-select: text;
  }

  .dialog-required {
    color: var(--red);
  }

  .dialog-field > .dialog-readonly {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .search-field {
    position: relative;
  }

  .search-results {
    position: fixed;
    max-height: 200px;
    overflow-y: auto;
    background: var(--navy);
    border: 1px solid var(--border);
    border-radius: 12px;
    z-index: 1001;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  .search-result-item {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-size: 0.95rem;
  }

  .search-result-item:hover,
  .search-result-item.search-result-active {
    background: var(--cyan-10);
  }

  .search-result-item.selected {
    background: var(--cyan-15);
    color: var(--accent);
  }

  .search-results-empty {
    padding: 0.5rem 0.85rem;
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  .datetime-field {
    position: relative;
  }

  .datetime-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    margin-top: 4px;
    width: 280px;
    padding: 0.75rem;
    background: var(--navy);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
  }

  .datetime-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .datetime-nav-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.2rem;
    border-radius: 8px;
    background: var(--cyan-10);
    color: var(--accent);
    border: none;
    cursor: pointer;
  }

  .datetime-nav-btn:hover {
    background: var(--cyan-25);
    color: var(--text-primary);
  }

  .datetime-nav-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
  }

  .datetime-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
  }

  .datetime-day-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.25rem 0;
  }

  .datetime-day {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0;
    background: none;
    color: var(--text-primary);
    border: none;
    cursor: pointer;
  }

  .datetime-day:hover {
    background: var(--cyan-10);
  }

  .datetime-today {
    border: 1px solid var(--slate-25);
  }

  .datetime-selected {
    background: var(--accent);
    color: var(--white);
  }

  .datetime-selected:hover {
    background: var(--accent-strong);
  }

  .datetime-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--slate-25);
  }

  .datetime-time-input {
    width: 3rem;
    text-align: center;
    padding: 0.35rem 0.25rem;
    font-size: 0.95rem;
    border-radius: 8px;
  }

  .datetime-time-sep {
    font-weight: 600;
    color: var(--text-secondary);
  }

  .list-item:not(.selected, .list-item-info, .list-item-static, :has(.dropdown-open)):hover {
    background: var(--cyan-10);
    border-color: var(--cyan-35);
  }

  .list-item-info,
  .list-item-static {
    cursor: default;
  }

  .list-info .list-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .list-info .list-route {
    display: block;
  }

  .list-info .list-value {
    overflow-wrap: anywhere;
  }

  .list-item-static:not(.list-pending):hover {
    background: var(--cyan-10);
    border-color: var(--cyan-35);
  }

  .list-value {
    color: var(--text-secondary);
    font-size: 0.95rem;
    text-align: right;
  }

  .list-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .tree-node {
    position: relative;
  }

  .tree-toggle {
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    height: 1.5rem;
    justify-content: center;
    width: 1.5rem;
    color: var(--text-secondary);
    padding: 0;
  }

  .tree-item,
  .tree-leaf {
    display: flex;
    gap: 0 0.6rem;
    justify-content: flex-start;
  }

  .tree-item .tree-toggle {
    flex: 0 0 auto;
    margin-right: 0.15rem;
  }

  .tree-item .list-route,
  .tree-leaf .list-route {
    flex: 0 1 auto;
  }

  .tree-item .list-description,
  .tree-leaf .list-description {
    flex: 1 1 auto;
    text-align: right;
  }

  .tree-children {
    margin-top: 1rem;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .table-section .list-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
  }

  .tree-children > .list-empty {
    padding-left: 1.5rem;
  }

  .tree-children > .list-empty:only-child {
    margin: 0;
  }

  .tree-ancestor .list-route {
    opacity: 0.5;
  }

  .search-selected::placeholder {
    color: var(--text-primary);
    opacity: 1;
  }

  .multi-search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    min-height: 38px;
    cursor: text;
    background: inherit;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 0.75rem;
  }

  .multi-search-container:focus-within {
    outline: none;
  }

  .multi-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--white-10);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    user-select: none;
  }

  .multi-search-chip-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
  }

  .multi-search-chip-remove:hover {
    opacity: 1;
  }

  .multi-search-input {
    flex: 1;
    min-width: 80px;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 2px 0;
  }

  .multi-search-input:focus-visible {
    outline: none;
  }

  .status {
    text-align: center;
    background: var(--navy-80);
    padding: 3rem;
    border-radius: 24px;
    border: 1px solid var(--cyan-15);
    box-shadow: var(--shadow-card);
    max-width: 460px;
  }

  .status-label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--text-muted);
    font-size: 0.8rem;
  }

  .status-title {
    margin: 1rem 0;
    font-size: 2rem;
    letter-spacing: 0.015em;
  }

  .status-message {
    margin: 0 0 2rem;
    color: var(--text-secondary);
    line-height: 1.7;
  }

  .status-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .footer {
    margin-top: auto;
    padding: 2.5rem 0 3rem;
  }

  .footer-content {
    width: min(1100px, 90%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    text-align: center;
  }

  .footer-copy {
    margin: 0;
  }

  .about-contacts {
    display: flex;
    justify-content: center;
  }

  .main-centered .cards-item::before {
    opacity: 0;
  }

  .main-centered .section-header {
    margin: 0;
  }

  .main-centered .cards-item .button {
    width: 100%;
    justify-content: center;
  }

  .table-wrap {
    overflow-x: auto;
    margin-top: 1.2rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .table-wrap::-webkit-scrollbar {
    height: 6px;
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
  }

  .data-table th,
  .data-table td {
    text-align: center;
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--slate-18);
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .data-table th {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
  }

  .data-table td {
    color: var(--text-primary);
    background: var(--navy-55);
  }

  .data-table tr:last-child td,
  .data-table tr:last-child th {
    border-bottom: none;
  }

  .data-table .table-col-rank {
    min-width: 3ch;
  }

  .data-table .table-col-name {
    text-align: left;
    min-width: 140px;
  }

  .table-col-meta {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
  }

  .table-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--body);
    overflow: auto;
    padding: 1rem;
  }

  .table-fullscreen .section-header {
    position: sticky;
    top: 0;
    background: var(--body);
    z-index: 1;
    padding-bottom: 0.5rem;
  }

  .data-table .table-group-header {
    border-left: 1px solid var(--slate-18);
    text-align: left;
  }

  .table-group-header span {
    position: sticky;
    left: 0.5rem;
  }

  .table-group-header:first-child {
    border-left: none;
  }

  .theme-toggle {
    background: none;
    border: none;
    padding: 0.4rem;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 0;
    line-height: 0;
  }

  .theme-toggle:hover,
  .theme-toggle:focus-visible {
    color: var(--text-primary);
    background: var(--cyan-15);
    transform: none;
    box-shadow: none;
    border-color: transparent;
  }

  .theme-icon-moon {
    display: none;
  }

  [data-theme='light'] .theme-icon-sun {
    display: none;
  }

  [data-theme='light'] .theme-icon-moon {
    display: block;
  }

  [data-theme='light'] {
    color-scheme: light;
    --body: var(--ice);
    --accent: var(--ocean);
    --accent-strong: var(--ocean-deep);
    --surface: var(--white-85);
    --surface-card: var(--white-90);
    --border: var(--silver-50);
    --border-glow: var(--cyan-deep-15);
    --glass-border: var(--silver-45);
    --text-primary: var(--navy-mid);
    --text-secondary: var(--gray-85);
    --text-muted: var(--slate-dark-75);
    --shadow-soft: 0 20px 70px var(--black-8);
    --shadow-card: 0 12px 40px var(--black-8);
  }

  [data-theme='light'] .nav {
    background: linear-gradient(120deg, var(--white-85), var(--snow-95));
  }

  [data-theme='light'] .nav-accent {
    box-shadow: 0 0 14px var(--ocean-35);
  }

  [data-theme='light'] .nav-link:hover,
  [data-theme='light'] .nav-link:focus-visible {
    background: var(--ocean-12);
  }

  [data-theme='light'] .nav-avatar-link:hover,
  [data-theme='light'] .nav-avatar-link:focus-visible {
    background: var(--ocean-12);
  }

  [data-theme='light'] .section-header h2::before {
    box-shadow: 0 0 12px var(--ocean-25);
    border-color: var(--white-60);
  }

  [data-theme='light'] .hero-background {
    background:
      radial-gradient(circle at 20% 20%, var(--cyan-deep-15), transparent 50%),
      radial-gradient(circle at 80% 0%, var(--ocean-12), transparent 45%),
      linear-gradient(160deg, var(--white-85), var(--ice-90));
    border-color: var(--silver-50);
    box-shadow: 0 24px 80px var(--black-8);
  }

  [data-theme='light'] .hero-eyebrow {
    color: var(--slate-dark-75);
  }

  [data-theme='light'] .hero-media {
    background:
      radial-gradient(circle at 35% 25%, var(--blue-20), transparent 65%),
      radial-gradient(circle at 70% 70%, var(--teal-15), transparent 60%), var(--ice-90);
    border-color: var(--silver-50);
    box-shadow: 0 25px 60px var(--black-8);
  }

  [data-theme='light'] .hero-media::after {
    border-color: var(--silver-45);
  }

  [data-theme='light'] .hero-avatar {
    box-shadow: 0 12px 30px var(--black-10);
  }

  [data-theme='light'] .list-item.selected {
    border-color: var(--ocean-35);
    background: var(--ocean-8);
    box-shadow:
      0 0 0 1px var(--ocean-25),
      var(--shadow-soft);
  }

  [data-theme='light'] .list-item.focused {
    border-color: var(--ocean-50);
    box-shadow:
      0 0 0 2px var(--ocean-25),
      var(--shadow-soft);
  }

  [data-theme='light'] .list-item .list-check {
    border-color: var(--slate-50);
  }

  [data-theme='light'] .cards-item {
    border-color: var(--silver-50);
  }

  [data-theme='light'] .search-results {
    background: var(--white);
  }

  [data-theme='light'] .multi-search-chip {
    background: var(--black-8);
  }

  [data-theme='light'] .cards-item:hover {
    box-shadow: 0 16px 50px var(--ocean-12);
  }

  [data-theme='light'] input:not(:disabled),
  [data-theme='light'] textarea:not(:disabled),
  [data-theme='light'] select:not(:disabled) {
    background: var(--white-80);
    border-color: var(--silver-60);
  }

  [data-theme='light'] .page .button,
  [data-theme='light'] .page button,
  [data-theme='light'] .page .action-select {
    background: var(--ocean-8);
  }

  [data-theme='light'] .page .theme-toggle {
    background: none;
  }

  [data-theme='light'] .page .theme-toggle:hover,
  [data-theme='light'] .page .theme-toggle:focus-visible {
    background: var(--ocean-12);
    border-color: transparent;
    box-shadow: none;
  }

  [data-theme='light'] .button:hover,
  [data-theme='light'] .button:focus-visible,
  [data-theme='light'] .file-input:has(> input:focus-visible),
  [data-theme='light'] button:hover,
  [data-theme='light'] button:focus-visible,
  [data-theme='light'] .action-select:hover {
    background: var(--ocean-15);
    border-color: var(--ocean-35);
    box-shadow: 0 14px 36px var(--ocean-12);
  }

  [data-theme='light'] .button-success {
    color: var(--color-success);
  }

  [data-theme='light'] .button-success:hover,
  [data-theme='light'] .button-success:focus-visible {
    background: var(--green-18);
    border-color: var(--green-30);
    color: var(--green-deep);
    box-shadow: 0 14px 36px var(--green-12);
  }

  [data-theme='light'] button.line-remove {
    color: var(--color-danger);
  }

  [data-theme='light'] button.line-remove:hover,
  [data-theme='light'] button.line-remove:focus-visible {
    background: var(--crimson-12);
    border-color: var(--crimson-35);
    color: var(--red-deep);
    box-shadow: 0 14px 36px var(--crimson-12);
  }

  [data-theme='light'] .notice {
    background: var(--white-98);
    border-color: var(--silver-50);
    box-shadow: 0 12px 40px var(--black-10);
  }

  [data-theme='light'] .notice-error {
    background: var(--rose-wash-95);
    border-color: var(--crimson-35);
    color: var(--red-deep);
  }

  [data-theme='light'] .notice-info {
    background: var(--blue-wash-95);
    border-color: var(--blue-mid-35);
    color: var(--blue-deep);
  }

  [data-theme='light'] .notice-success,
  [data-theme='light'] .global-notice-success {
    background: var(--mint-wash-95);
    border-color: var(--green-35);
    color: var(--green-deep);
  }

  [data-theme='light'] .global-notice {
    background: var(--ice-95);
    border-color: var(--slate-25);
  }

  [data-theme='light'] .global-notice-error {
    background: var(--rose-wash-95);
    border-color: var(--red-35);
    color: var(--red-deep);
  }

  [data-theme='light'] .global-notice-info {
    background: var(--blue-wash-95);
    border-color: var(--blue-mid-35);
    color: var(--blue-deep);
  }

  [data-theme='light'] .dialog-overlay {
    background: var(--black-25);
  }

  [data-theme='light'] .dropdown-menu {
    background: var(--white);
  }

  [data-theme='light'] .dropdown-item:hover {
    background: var(--ocean-8);
  }

  [data-theme='light'] .styled-select-trigger {
    background: var(--white-80);
    border-color: var(--silver-60);
  }

  [data-theme='light'] .status {
    background: var(--white-85);
    border-color: var(--silver-50);
  }

  [data-theme='light'] .data-table tr th,
  [data-theme='light'] .data-table tr td {
    border-bottom-color: var(--silver-50);
  }

  [data-theme='light'] .data-table tr td {
    background: var(--snow-70);
  }

  [data-theme='light'] .list-item:not(.selected, .list-item-info, .list-item-static, :has(.dropdown-open)):hover {
    background: var(--ocean-8);
    border-color: var(--ocean-25);
  }

  [data-theme='light'] .list-item-static:not(.list-pending):hover {
    background: var(--ocean-8);
    border-color: var(--ocean-25);
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin: 2.5rem 0 1rem;
    flex-wrap: wrap;
    scroll-margin-top: 1rem;
  }

  .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.6rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
    cursor: pointer;
  }

  a.pagination-btn:hover,
  a.pagination-btn:focus-visible {
    color: var(--text-primary);
    background: var(--cyan-10);
    border-color: var(--cyan-25);
  }

  .pagination-current {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
    cursor: default;
  }

  .pagination-disabled {
    opacity: 0.35;
    cursor: default;
  }

  .pagination-ellipsis {
    color: var(--text-muted);
    padding: 0 0.25rem;
    font-size: 0.9rem;
    user-select: none;
  }

  [data-theme='light'] .pagination-current {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
  }

  @media (width <=900px) {
    .list-items.as-cards {
      grid-template-columns: var(--list-cols, repeat(2, minmax(0, 1fr)));
    }

    .nav {
      justify-content: center;
    }

    .nav-brand {
      flex: 1 0 auto;
    }

    .nav-fixed {
      margin-left: 0;
      order: 0;
    }

    .nav-wrap {
      flex: 1 0 100%;
      justify-content: center;
      order: 1;
    }

    .hero-content {
      padding: 2.4rem;
      justify-content: center;
      text-align: center;
    }

    .hero-copy {
      align-items: center;
    }

    .hero-greeting {
      font-size: clamp(2.4rem, 7vw, 3rem);
    }
  }

  @media (width <=600px) {
    .list-items.as-cards {
      grid-template-columns: var(--list-cols, 1fr);
    }

    .nav {
      padding: 1.5rem;
    }

    .hero-content {
      padding: 2rem 1.6rem;
    }

    .hero-media {
      width: clamp(120px, 28vw, 160px);
    }

    .section-header {
      margin: 3.2rem 0 1.4rem;
    }

    .control-row {
      flex-wrap: wrap;
    }

    .control-row > .control-group:first-child {
      flex: 1 1 100%;
      overflow: visible;
    }

    .control-row > .control-group:last-child {
      flex: 1 1 100%;
      justify-content: flex-end;
      min-width: 0;
    }

    .control-row > .control-group:last-child > .section-search {
      flex: 1 1 100%;
      min-width: 0;
    }

    .control-row > .control-group:last-child > .section-search input {
      width: 100%;
      max-width: none;
    }

    .status {
      padding: 2.4rem 1.6rem;
    }
  }
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease;
  transition-delay: 0s;
}

html.theme-transition .nav,
html.theme-transition .nav-accent {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.zoom-viewport {
  flex: 1 1 auto;
  max-height: 100dvh;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

@media (width <=640px) {
  .dialog-share .share-participant {
    flex-wrap: wrap;
  }

  .dialog-share .share-participant-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .dialog-share .share-participant-actions .button {
    min-width: 0;
    padding-inline: 0.5rem;
  }

  .share-recipient-header {
    flex-wrap: wrap;
  }

  .share-recipient-header .styled-select {
    order: 1;
    flex-basis: 100%;
  }
}