@scope (#legacy-shell) {

    :root {
      --violet: #8c63ff;
      --violet-dark: #50318c;
      --violet-deep: #261242;
      --pink: #f08cd6;
      --pink-soft: #fceeff;
      --mint: #7ed1c0;
      --green: #69c79a;
      --green-soft: #ebfff5;
      --yellow: #f1ca63;
      --yellow-soft: #fff7dc;
      --ink: #2e2348;
      --muted: #786c95;
      --line: rgba(125, 95, 197, .18);
      --paper: rgba(255, 255, 255, .92);
      --soft: #f7f1ff;
      --sky: #eef6ff;
      --danger: #de5e7c;
      --glow: rgba(140, 99, 255, .16);
      --shadow: 0 24px 60px rgba(41, 23, 72, .16);
      --radius: 22px;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
      line-height: 1.55;
      background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .88), transparent 28%),
        radial-gradient(circle at 82% 0%, rgba(193, 172, 255, .34), transparent 24%),
        radial-gradient(circle at 50% 30%, rgba(162, 215, 255, .18), transparent 32%),
        linear-gradient(180deg, #f7f3ff 0%, #f3efff 40%, #fbfaff 100%);
      min-height: 100vh;
      position: relative;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
    }

    body::before {
      background:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, .95) 0 1px, transparent 2px),
        radial-gradient(circle at 22% 76%, rgba(180, 143, 255, .7) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 16%, rgba(255, 255, 255, .9) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 84% 64%, rgba(196, 163, 255, .7) 0 1px, transparent 2px),
        radial-gradient(circle at 56% 88%, rgba(255, 255, 255, .85) 0 1px, transparent 2px);
      opacity: .75;
    }

    body::after {
      background:
        radial-gradient(circle at 12% 80%, rgba(234, 216, 255, .55), transparent 18%),
        radial-gradient(circle at 88% 22%, rgba(215, 232, 255, .42), transparent 16%);
    }

    img {
      display: block;
      max-width: 100%;
    }

    button,
    input,
    select {
      font: inherit;
    }

    a {
      color: var(--violet-dark);
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(255, 255, 255, .6);
      background: rgba(255, 255, 255, .74);
      backdrop-filter: blur(20px);
      box-shadow: 0 14px 40px rgba(71, 38, 122, .08);
    }

    .nav {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .mark {
      width: 58px;
      height: 58px;
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      color: white;
      font-weight: 800;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15) 35%, transparent 52%),
        linear-gradient(135deg, #f4e8ff, #e5d6ff);
      box-shadow:
        inset 0 0 0 1px rgba(123, 85, 196, .12),
        0 14px 30px rgba(123, 63, 242, .18);
      flex: 0 0 auto;
      overflow: hidden;
    }

    .brand-logo {
      width: 42px;
      height: 42px;
      object-fit: cover;
      border-radius: 50%;
      filter: drop-shadow(0 6px 14px rgba(89, 46, 164, .18));
    }

    .brand strong,
    .brand span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand span {
      color: var(--muted);
      font-size: 14px;
    }

    .brand strong {
      font-size: 18px;
      letter-spacing: .01em;
    }

    .nav-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      flex: 0 0 auto;
    }

    .btn {
      border: 0;
      border-radius: var(--radius);
      min-height: 42px;
      padding: 12px 20px;
      color: white;
      cursor: pointer;
      background: linear-gradient(135deg, #7f5dff, #a472ff);
      box-shadow: 0 12px 26px rgba(123, 63, 242, .22);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      font-weight: 700;
      letter-spacing: .01em;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(123, 63, 242, .27);
    }

    .btn:disabled {
      opacity: .72;
      cursor: wait;
      transform: none;
      box-shadow: 0 8px 16px rgba(123, 63, 242, .14);
    }

    .btn.secondary {
      color: var(--violet-dark);
      background: rgba(255, 255, 255, .82);
      border: 1px solid var(--line);
      box-shadow: 0 8px 20px rgba(96, 72, 145, .08);
    }

    .btn.add {
      background: linear-gradient(135deg, #1f9d68, #38c889);
      box-shadow: 0 10px 22px rgba(31, 157, 104, .24);
    }

    .btn.view {
      background: linear-gradient(135deg, #6b38d2, #9c5cff);
      box-shadow: 0 10px 22px rgba(107, 56, 210, .24);
    }

    .btn.small {
      min-height: 34px;
      padding: 7px 12px;
      font-size: 14px;
    }

    .btn.danger {
      background: var(--danger);
    }

    .hero {
      min-height: 82vh;
      display: grid;
      align-items: end;
      position: relative;
      overflow: hidden;
      color: white;
      background:
        radial-gradient(circle at 80% 18%, rgba(255, 228, 255, .26), transparent 20%),
        radial-gradient(circle at 15% 16%, rgba(255, 255, 255, .24), transparent 18%),
        linear-gradient(90deg, rgba(25, 12, 48, .9), rgba(40, 23, 73, .68) 48%, rgba(49, 27, 84, .34)),
        url("https://indigo.family/images/%D0%A1%D0%B0%D0%B9%D1%82-%D0%92%D1%80%D0%B5%D0%BC%D1%8F-%D0%98%D0%BD%D0%B4%D0%B8%D0%B3%D0%BE/%D0%92%D0%86%D1%88%D0%BA%D0%B8/dizain-bez-nazvaniya--43-.png") center / cover;
    }

    .hero-inner {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 80px 0 72px;
    }

    .eyebrow {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      margin: 0 0 18px;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .12);
      color: rgba(255, 255, 255, .92);
      font-weight: 700;
    }

    h1 {
      max-width: 860px;
      margin: 0;
      font-size: clamp(38px, 7vw, 82px);
      line-height: .98;
      letter-spacing: 0;
    }

    .lead {
      max-width: 720px;
      margin: 22px 0 0;
      color: rgba(255, 255, 255, .9);
      font-size: 20px;
    }

    .section {
      padding: 72px 0;
    }

    .section.alt {
      background: rgba(255, 255, 255, .48);
    }

    .wrap {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    .intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
      gap: 34px;
      align-items: center;
    }

    .copy h2,
    .section-title {
      margin: 0 0 18px;
      color: var(--violet-dark);
      font-size: clamp(28px, 4vw, 48px);
      line-height: 1.08;
      letter-spacing: 0;
    }

    .copy p {
      margin: 0 0 14px;
      color: #3c314e;
      font-size: 18px;
    }

    .photo-panel {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: white;
    }

    .photo-panel img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .photo-caption {
      padding: 18px;
      color: var(--muted);
      background: white;
      font-weight: 700;
    }

    .shift-groups {
      display: grid;
      gap: 22px;
    }

    .group {
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .group h3 {
      margin: 0 0 16px;
      color: var(--violet-dark);
      font-size: 26px;
    }

    .group-note {
      margin: -4px 0 18px;
      padding: 14px 16px;
      border-left: 5px solid var(--yellow);
      border-radius: var(--radius);
      color: #59420d;
      background: var(--yellow-soft);
    }

    .shift-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .shift-card {
      min-height: 100%;
      padding: 18px;
      border: 2px solid var(--card-border, var(--line));
      border-radius: 24px;
      background: var(--card-gradient, #fff);
      box-shadow: 0 18px 34px rgba(54, 31, 91, .11);
      position: relative;
      overflow: hidden;
    }

    .shift-card::after {
      content: "";
      position: absolute;
      inset: auto -10% -40px auto;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .42);
      filter: blur(10px);
      pointer-events: none;
    }

    .shift-card.theme-namety {
      --card-gradient: linear-gradient(135deg, #efe6ff, #f8f1ff);
      --card-border: #cdbcf6;
    }

    .shift-card.theme-karpaty {
      --card-gradient: linear-gradient(135deg, #dff4e4, #f0fbf3);
      --card-border: #a7d1b1;
    }

    .shift-card.theme-bulgaria {
      --card-gradient: linear-gradient(135deg, #e0f3ff, #f1f9ff);
      --card-border: #a8cfe8;
    }

    .shift-card.theme-training {
      --card-gradient: linear-gradient(135deg, #fff4c8, #fff9e4);
      --card-border: #e7d27a;
    }

    .shift-card-media {
      width: calc(100% + 36px);
      margin: -18px -18px 16px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-bottom: 1px solid rgba(255, 255, 255, .65);
    }

    .shift-card-placeholder {
      width: calc(100% + 36px);
      margin: -18px -18px 16px;
      aspect-ratio: 16 / 9;
      display: grid;
      place-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, .65);
      color: rgba(67, 32, 127, .7);
      background: linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .2));
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .shift-card-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 6px 12px;
      margin-bottom: 12px;
      border-radius: 999px;
      color: var(--violet-dark);
      background: rgba(255, 255, 255, .74);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .shift-card-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
    }

    .shift-card-actions .btn {
      min-width: 132px;
    }

    .capacity-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .capacity-tags span {
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      color: var(--violet-dark);
      font-size: 13px;
      font-weight: 800;
    }

    .shift-card h4 {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.25;
    }

    .meta {
      display: grid;
      gap: 6px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .capacity-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      color: var(--violet-dark);
      font-weight: 800;
    }

    .public-capacity {
      display: grid;
      gap: 5px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
      color: var(--violet-dark);
      font-weight: 750;
    }

    .login-box {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 12px;
      align-items: end;
      margin-top: 24px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: var(--shadow);
    }

    .field {
      display: grid;
      gap: 7px;
    }

    label {
      color: var(--violet-dark);
      font-size: 14px;
      font-weight: 800;
    }

    input,
    select {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px 12px;
      color: var(--ink);
      background: white;
      outline: none;
    }

    input:focus,
    select:focus {
      border-color: var(--violet);
      box-shadow: 0 0 0 3px rgba(123, 63, 242, .13);
    }

    .message {
      margin-top: 12px;
      color: var(--danger);
      font-weight: 700;
    }

    .login-hint {
      margin-top: 14px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .magic-toast {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(35, 27, 55, .42);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
    }

    .magic-toast-card {
      width: min(620px, 100%);
      padding: clamp(26px, 5vw, 46px);
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: var(--radius);
      color: white;
      text-align: center;
      background: linear-gradient(135deg, var(--violet), var(--pink), var(--mint));
      box-shadow: 0 24px 70px rgba(35, 27, 55, .36);
      transform: scale(.94) translateY(16px);
      transition: transform .24s ease;
    }

    .magic-toast.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .magic-toast.visible .magic-toast-card {
      transform: scale(1) translateY(0);
    }

    .magic-toast strong {
      display: block;
      margin-bottom: 12px;
      font-size: clamp(26px, 5vw, 42px);
      line-height: 1.05;
    }

    .magic-toast span {
      display: block;
      font-size: clamp(18px, 3vw, 24px);
      line-height: 1.35;
    }

    .private {
      display: none;
    }

    .private.visible {
      display: block;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin: 0 0 22px;
    }

    .choice-panel {
      margin: 0 0 24px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: var(--shadow);
    }

    .system-panel,
    .admin-panel,
    .admin-filter-panel,
    .training-panel,
    .registry-panel,
    .guest-panel {
      margin: 0 0 24px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: var(--shadow);
    }

    .system-panel {
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .choice-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
      gap: 14px;
      align-items: end;
    }

    .admin-grid,
    .registry-form,
    .training-form,
    .guest-form {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
    }

    .guest-form {
      grid-template-columns: minmax(150px, 1fr) minmax(140px, .7fr) minmax(140px, .7fr) auto;
    }

    .training-form {
      grid-template-columns: minmax(220px, .95fr) minmax(220px, 1fr) minmax(220px, 1fr);
      align-items: end;
    }

    .training-form .modal-block-title,
    .add-master-form .modal-block-title {
      grid-column: 1 / -1;
      margin-bottom: 4px;
    }

    .training-form .field:last-of-type {
      grid-column: 1 / 2;
    }

    .training-form .btn {
      grid-column: 2 / 4;
      width: 100%;
      align-self: end;
      justify-self: stretch;
    }

    .day-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .day-checks label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 38px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      color: var(--ink);
      background: var(--soft);
      font-size: 14px;
    }

    .day-checks input {
      width: auto;
      min-height: auto;
    }

    .small-note {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .star-note {
      color: #8f2455;
      font-weight: 900;
    }

    .selected-shift {
      display: grid;
      gap: 8px;
      margin-top: 18px;
      padding: 16px;
      border-radius: var(--radius);
      color: var(--violet-dark);
      background: linear-gradient(90deg, var(--soft), var(--sky));
      font-weight: 700;
    }

    .slot-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
      gap: 8px;
      padding: 16px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .slot-number {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      color: var(--violet-dark);
      background: var(--soft);
      font-weight: 900;
    }

    .slot-number.busy.fixed {
      color: #11613d;
      background: var(--green-soft);
      border-color: #a8e7c4;
    }

    .slot-number.extra,
    .slot-number.busy.extra {
      color: #8f2455;
      background: var(--pink-soft);
      border-color: #ffafd0;
    }

    .slot-number.busy.question {
      color: #674800;
      background: var(--yellow-soft);
      border-color: #f5d579;
    }

    .empty-state {
      padding: 26px;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      color: var(--muted);
      background: rgba(255, 255, 255, .8);
      font-weight: 700;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 10px;
      border-radius: var(--radius);
      font-weight: 800;
      font-size: 13px;
      white-space: nowrap;
    }

    .status-pill.fixed,
    .row-fixed {
      background: var(--green-soft);
      color: #11613d;
    }

    .status-pill.extra,
    .row-extra {
      background: var(--pink-soft);
      color: #8f2455;
    }

    .status-pill.question,
    .row-question {
      background: var(--yellow-soft);
      color: #674800;
    }

    .table-block {
      margin: 26px 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .compact-stack {
      display: grid;
      gap: 14px;
    }

    .event-details {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .event-details summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 16px 18px;
      cursor: pointer;
      list-style: none;
    }

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

    .event-details[open] summary {
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .event-title {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .event-title h3,
    .event-title h4 {
      margin: 0;
      color: var(--violet-dark);
      font-size: 20px;
      line-height: 1.2;
    }

    .event-title span {
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .event-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
    }

    .event-metrics span {
      min-height: 28px;
      padding: 5px 9px;
      border-radius: var(--radius);
      color: var(--violet-dark);
      background: var(--soft);
      font-size: 13px;
      font-weight: 850;
    }

    .event-toggle {
      color: var(--violet-dark);
      font-weight: 900;
      white-space: nowrap;
    }

    .event-details[open] .event-toggle {
      color: var(--mint);
      font-size: 0;
    }

    .event-details[open] .event-toggle::before {
      content: "Закрити";
      font-size: 16px;
    }

    .table-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 18px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .table-head h3 {
      margin: 0;
      color: var(--violet-dark);
      font-size: 22px;
    }

    .table-wrap {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 760px;
    }

    th,
    td {
      padding: 12px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
    }

    th {
      color: var(--violet-dark);
      background: #fff;
      font-size: 14px;
      text-transform: uppercase;
    }

    td:first-child,
    th:first-child {
      width: 76px;
      text-align: center;
      font-weight: 800;
    }

    tr:last-child td {
      border-bottom: 0;
    }

    .slot-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .slot-actions .btn {
      box-shadow: none;
    }

    .add-master-form {
      display: grid;
      grid-template-columns: minmax(170px, 1fr) minmax(130px, .55fr) minmax(170px, .7fr) auto;
      gap: 10px;
      align-items: end;
      padding: 16px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .waiting-list {
      padding: 16px;
      border-top: 1px solid var(--line);
      background: #fffdf7;
    }

    .waiting-list h4 {
      margin: 0 0 12px;
      color: #674800;
      font-size: 18px;
    }

    .waiting-list ul {
      display: grid;
      gap: 8px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .empty-row {
      color: var(--muted);
      background: #fff;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin: 0 0 30px;
    }

    .registry-table td:first-child,
    .registry-table th:first-child,
    .admin-result-table td:first-child,
    .admin-result-table th:first-child {
      width: auto;
      text-align: left;
    }

    .summary-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
      overflow: hidden;
    }

    .summary-card summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 18px;
      cursor: pointer;
      list-style: none;
    }

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

    .summary-card h4 {
      margin: 0 0 8px;
      color: var(--violet-dark);
      font-size: 18px;
    }

    .summary-card[open] summary {
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .numbers {
      display: grid;
      gap: 8px;
      color: var(--muted);
    }

    .numbers strong {
      color: var(--ink);
    }

    .progress {
      height: 10px;
      margin: 14px 0 0;
      overflow: hidden;
      border-radius: 999px;
      background: #eee8f7;
    }

    .progress span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--green), var(--yellow));
    }

    .summary-toggle {
      color: var(--violet-dark);
      font-weight: 900;
      white-space: nowrap;
    }

    .summary-card[open] .summary-toggle {
      color: var(--mint);
    }

    .summary-card[open] .summary-toggle::before {
      content: "Закрити";
    }

    .summary-card[open] .summary-toggle {
      font-size: 0;
    }

    .summary-card[open] .summary-toggle::before {
      font-size: 16px;
    }

    .summary-list {
      display: grid;
      gap: 10px;
      padding: 16px 18px 18px;
      margin: 0;
      list-style: none;
    }

    .summary-person {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: var(--radius);
      font-weight: 800;
    }

    .summary-person .slot {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .72);
    }

    .summary-empty {
      padding: 16px 18px 18px;
      color: var(--muted);
      font-weight: 700;
    }

    .footer-note {
      margin-top: 24px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      color: var(--muted);
    }

    .hero-meta-form {
      margin-top: 18px;
    }

    .hero-meta-form textarea,
    .admin-grid textarea {
      width: 100%;
      min-height: 120px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      color: var(--ink);
      background: white;
      resize: vertical;
      outline: none;
      font: inherit;
    }

    .hero-meta-form textarea:focus,
    .admin-grid textarea:focus {
      border-color: var(--violet);
      box-shadow: 0 0 0 3px rgba(123, 63, 242, .13);
    }

    .public-toolbar {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .filter-panel {
      margin: 0 0 24px;
      padding: 20px;
      border: 1px solid #ddd6f7;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(247, 243, 255, .95), rgba(233, 248, 255, .92));
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .filter-grid {
      display: grid;
      grid-template-columns: minmax(180px, .5fr) minmax(220px, .8fr);
      gap: 14px;
      align-items: end;
    }

    .bottom-registry {
      margin-top: 20px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .bottom-registry p {
      margin: 10px 0 0;
      color: var(--muted);
    }

    .registry-summary summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      cursor: pointer;
      list-style: none;
    }

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

    .registry-summary[open] summary {
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .modal {
      width: min(1100px, calc(100vw - 24px));
      max-width: 1100px;
      padding: 0;
      border: 3px solid var(--modal-border, #ddd6f7);
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(35, 27, 55, .3);
      background: var(--modal-fill, white);
    }

    .modal::backdrop {
      background: rgba(35, 27, 55, .58);
      backdrop-filter: blur(8px);
    }

    .modal-head {
      display: flex;
      justify-content: flex-end;
      padding: 14px 14px 0;
      background: transparent;
    }

    .modal-body {
      max-height: calc(100vh - 180px);
      overflow: auto;
      padding: 4px 20px 20px;
      background: transparent;
    }

    .modal-close {
      min-width: 42px;
      min-height: 42px;
      border: 0;
      border-radius: 12px;
      color: var(--violet-dark);
      background: rgba(255, 255, 255, .9);
      border: 2px solid rgba(255, 255, 255, .7);
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
    }

    .modal-grid {
      display: grid;
      gap: 18px;
    }

    .modal-title-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: baseline;
      margin-bottom: 8px;
      padding: 0 4px;
      color: var(--ink);
    }

    .modal-title-row strong {
      font-size: 22px;
      line-height: 1.12;
    }

    .modal-title-row span {
      color: #5e5371;
      font-size: 15px;
      font-weight: 700;
    }

    .modal-subline {
      margin: 0 0 12px;
      padding: 0 4px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .modal-content-block {
      padding: 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(67, 32, 127, .12);
    }

    .modal-content-block + .modal-content-block {
      margin-top: 10px;
    }

    .modal-block-title {
      margin: 0 0 10px;
      color: var(--violet-dark);
      font-size: 16px;
      font-weight: 900;
    }

    .master-form-card {
      border: 2px solid rgba(106, 56, 210, .24);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(244, 236, 255, .92)),
        linear-gradient(135deg, rgba(122, 63, 242, .08), rgba(255, 95, 159, .05));
      box-shadow: 0 16px 34px rgba(106, 56, 210, .12);
      position: relative;
      overflow: hidden;
    }

    .master-form-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 6px;
      background: linear-gradient(180deg, #7b3ff2, #ff79b1);
      border-radius: 18px 0 0 18px;
    }

    .master-form-card::after {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(123, 63, 242, .14);
      border-radius: 14px;
      pointer-events: none;
    }

    .master-form-card .modal-block-title {
      padding-left: 8px;
      font-size: 17px;
    }

    .modal .add-master-form,
    .modal .training-form {
      padding: 16px;
      gap: 12px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 242, 255, .92));
      border-radius: 18px;
    }

    .modal .guest-form {
      padding: 0;
      border: 0;
      background: transparent;
      gap: 10px;
    }

    .modal .add-master-form {
      grid-template-columns: minmax(210px, 1fr) minmax(170px, .85fr) minmax(210px, 1fr) auto;
      align-items: end;
    }

    .modal .add-master-form .btn {
      min-width: 180px;
      align-self: end;
    }

    .registry-master-name {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-weight: 800;
    }

    .deleted-note {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 4px 9px;
      border-radius: 999px;
      color: #9f1737;
      background: #ffe4ec;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .registry-event-list {
      display: grid;
      gap: 8px;
      min-width: 280px;
    }

    .registry-status-stack {
      display: grid;
      gap: 4px;
      line-height: 1.35;
    }

    .registry-status-stack strong {
      color: var(--violet-dark);
      font-size: 14px;
    }

    .registry-status-stack span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .registry-event-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border: 1px solid rgba(67, 32, 127, .1);
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(247, 243, 255, .92), rgba(255, 255, 255, .98));
    }

    .registry-event-item.fixed {
      border-color: #a8e7c4;
      background: linear-gradient(135deg, #e7faef, #f5fdf8);
    }

    .registry-event-item.question {
      border-color: #d8c8f3;
      background: linear-gradient(135deg, #f4ecff, #fbf7ff);
    }

    .registry-event-item.extra {
      border-color: #f2db8d;
      background: linear-gradient(135deg, #fff6d8, #fffbf0);
    }

    .registry-event-item.deleted {
      border-color: #f3b1c1;
      background: linear-gradient(135deg, #fff1f5, #fff8fa);
    }

    .registry-event-item.guest {
      border-color: #dfcfb8;
      background: linear-gradient(135deg, #f8efe5, #fdf8f1);
    }

    .registry-master-name.only-deleted {
      color: #9f1737;
    }

    .registry-separator td {
      background: linear-gradient(90deg, rgba(248, 239, 229, .95), rgba(255, 248, 241, .98));
      color: #77563a;
      font-weight: 900;
      letter-spacing: .03em;
    }

    .registry-event-number {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: var(--violet-dark);
      background: rgba(123, 63, 242, .1);
      font-size: 13px;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .registry-event-text {
      min-width: 0;
      color: #362b48;
      font-weight: 700;
      line-height: 1.35;
    }

    .registry-event-item.deleted {
      border-color: #f3b1c1;
      background: linear-gradient(135deg, #fff1f5, #fff8fa);
    }

    .modal .field {
      gap: 5px;
    }

    .modal label {
      font-size: 13px;
    }

    .modal input,
    .modal select {
      min-height: 42px;
      border-radius: 14px;
      padding: 9px 12px;
    }

    .modal .btn {
      min-height: 44px;
      border-radius: 14px;
    }

    .modal .table-wrap {
      border-radius: 16px;
      overflow: auto;
      background: rgba(255, 255, 255, .7);
    }

    .modal table {
      min-width: 640px;
    }

    .modal th,
    .modal td {
      padding: 10px 12px;
    }

    .modal .slot-strip {
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(67, 32, 127, .08);
      background: rgba(255, 255, 255, .6);
      margin-bottom: 10px;
    }

    .modal .waiting-list,
    .modal .guest-panel {
      margin-top: 10px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(67, 32, 127, .08);
      background: rgba(255, 255, 255, .56);
    }

    .modal .waiting-list h4,
    .modal .guest-panel h4 {
      margin: 0 0 8px;
      font-size: 16px;
    }

    .modal .small-note {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.35;
    }

    .modal .summary-list {
      padding: 8px 0 0;
    }

    .modal .summary-person {
      grid-template-columns: 34px minmax(0, 1fr) auto auto;
      padding: 8px 10px;
      font-size: 14px;
    }

    .modal .summary-person .slot {
      width: 28px;
      height: 28px;
    }

    .modal.theme-training {
      --modal-border: #ef9dc6;
      --modal-fill: linear-gradient(180deg, #ffe9f4, #fff5fa);
    }

    .modal.theme-karpaty {
      --modal-border: #8fc69c;
      --modal-fill: linear-gradient(180deg, #e8f7ec, #f5fcf7);
    }

    .modal.theme-kukhari,
    .modal.theme-namety {
      --modal-border: #baa7ea;
      --modal-fill: linear-gradient(180deg, #f2ebff, #faf7ff);
    }

    .modal.theme-bulgaria {
      --modal-border: #93c4e8;
      --modal-fill: linear-gradient(180deg, #e8f6ff, #f5fbff);
    }

    .auth-note {
      margin-top: 10px;
      color: var(--muted);
      font-size: 14px;
      text-align: center;
    }

    .admin-section {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

    .hidden {
      display: none !important;
    }

    .gated {
      display: none;
    }

    .gated.visible {
      display: block;
    }

    @media (max-width: 900px) {
      .intro-grid,
      .shift-list,
      .login-box,
      .filter-grid,
      .choice-grid,
      .admin-grid,
      .registry-form,
      .training-form,
      .guest-form,
      .summary-grid {
        grid-template-columns: 1fr;
      }

      .hero {
        min-height: 76vh;
      }
    }

    @media (max-width: 640px) {
      .nav {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 0;
      }

      .nav-actions {
        width: 100%;
        justify-content: stretch;
      }

      .nav-actions .btn {
        flex: 1 1 auto;
      }

      .hero-inner {
        padding: 64px 0 54px;
      }

      .section {
        padding: 52px 0;
      }

      .group,
      .login-box {
        padding: 18px;
      }

      .lead,
      .copy p {
        font-size: 17px;
      }

      .modal-body {
        padding: 2px 12px 14px;
      }

      .modal-content-block {
        padding: 12px;
      }

      .summary-card summary,
      .event-details summary,
      .summary-person {
        grid-template-columns: 1fr;
      }

      .summary-toggle {
        white-space: normal;
      }

      .add-master-form {
        grid-template-columns: 1fr;
      }

      .training-form {
        grid-template-columns: 1fr;
      }

      .training-form .modal-block-title,
      .training-form .field:last-of-type,
      .training-form .btn,
      .add-master-form .modal-block-title {
        grid-column: auto;
      }

      .modal .add-master-form {
        grid-template-columns: 1fr;
      }

      .modal .add-master-form .btn {
        grid-column: auto;
        min-width: 0;
      }

      .shift-card-media {
        width: calc(100% + 36px);
      }

      table {
        min-width: 620px;
      }

      .magic-toast {
        padding: 16px;
      }
    }
    .wrap,
    .filter-panel,
    .admin-panel,
    .admin-filter-panel,
    .bottom-registry,
    .summary-grid > *,
    .photo-panel,
    .shift-card,
    .login-box,
    .modal-content-block,
    .table-wrap,
    .registry-table-wrap,
    .summary-card {
      border-radius: 28px;
    }

    .filter-panel,
    .admin-panel,
    .admin-filter-panel,
    .bottom-registry,
    .summary-grid > *,
    .photo-panel,
    .shift-card,
    .login-box,
    .modal-content-block,
    .table-wrap,
    .summary-card {
      border: 1px solid rgba(129, 94, 202, .14);
      background: rgba(255, 255, 255, .78);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .public-toolbar,
    .toolbar,
    .bottom-registry,
    .admin-section,
    .summary-grid > *,
    .filter-panel,
    .admin-filter-panel {
      position: relative;
      overflow: hidden;
    }

    .public-toolbar::before,
    .toolbar::before,
    .bottom-registry::before,
    .admin-section::before,
    .summary-grid > *::before,
    .filter-panel::before,
    .admin-filter-panel::before,
    .modal::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .92), transparent 18%),
        radial-gradient(circle at 82% 0%, rgba(228, 215, 255, .74), transparent 18%);
      pointer-events: none;
    }

    .section-title,
    .copy h2,
    .modal-title-row strong,
    .modal h3,
    .modal h4 {
      letter-spacing: .01em;
    }

    .filter-panel,
    .admin-filter-panel,
    .bottom-registry,
    .admin-section {
      padding: 24px;
    }

    .public-toolbar {
      margin-bottom: 18px;
    }

    .field label,
    .modal label,
    .small-note,
    .login-hint,
    .modal-kicker {
      color: var(--violet-dark);
      font-weight: 700;
      letter-spacing: .01em;
    }

    input,
    select,
    textarea,
    .modal input,
    .modal select {
      width: 100%;
      min-height: 52px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(129, 94, 202, .16);
      background: rgba(255, 255, 255, .88);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    textarea,
    .admin-grid textarea {
      min-height: 132px;
      resize: vertical;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .modal input:focus,
    .modal select:focus,
    .admin-grid textarea:focus {
      outline: none;
      border-color: rgba(127, 93, 255, .46);
      box-shadow: 0 0 0 4px rgba(140, 99, 255, .12);
    }

    .hero-inner,
    .intro-grid,
    .filter-grid,
    .admin-grid,
    .registry-form,
    .modal-grid {
      position: relative;
      z-index: 1;
    }

    .modal {
      width: min(1100px, calc(100% - 36px));
      padding: 0;
      overflow: hidden;
      border-radius: 34px;
      border: 1px solid rgba(174, 145, 234, .5);
      background:
        radial-gradient(circle at top right, rgba(237, 226, 255, .85), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 244, 255, .94));
      box-shadow: 0 34px 90px rgba(38, 18, 66, .34);
    }

    .modal::backdrop {
      background:
        radial-gradient(circle at center, rgba(130, 95, 220, .12), transparent 30%),
        rgba(24, 11, 48, .48);
      backdrop-filter: blur(9px);
    }

    .modal-head {
      min-height: 70px;
      padding: 18px 22px 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .modal-body {
      padding: 0 28px 30px;
    }

    .modal-close {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      color: var(--violet-dark);
      border: 1px solid rgba(143, 104, 222, .18);
      box-shadow: 0 10px 24px rgba(76, 41, 137, .12);
      font-size: 28px;
      line-height: 1;
    }

    .modal-summary,
    .modal-title-row,
    .modal-subline {
      text-align: center;
      justify-content: center;
    }

    .modal-summary {
      margin: 0 auto 24px;
      max-width: 760px;
    }

    .modal-title-row {
      gap: 12px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .modal-title-row strong {
      font-size: clamp(26px, 4vw, 40px);
    }

    .modal-title-row span,
    .modal-subline {
      color: var(--muted);
    }

    .modal-grid,
    .summary-grid,
    .filter-grid {
      gap: 18px;
    }

    .modal-content-block {
      padding: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(245, 239, 255, .9));
    }

    .modal-block-title {
      margin-bottom: 14px;
      font-size: 20px;
      text-align: left;
    }

    .modal .add-master-form,
    .modal .training-form,
    .modal .guest-form,
    .login-box {
      padding: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(247, 241, 255, .9));
      border: 1px solid rgba(132, 101, 204, .12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    .modal .add-master-form {
      border-left: 6px solid rgba(140, 99, 255, .5);
    }

    .modal .guest-form {
      border-left: 6px solid rgba(156, 122, 255, .32);
    }

    .modal .btn,
    .login-box .btn {
      width: 100%;
      justify-content: center;
    }

    .table-wrap,
    .registry-table-wrap {
      overflow: auto;
      padding: 12px;
      background: rgba(255, 255, 255, .82);
    }

    table {
      border-collapse: separate;
      border-spacing: 0;
    }

    .modal table,
    .registry-table,
    .admin-result-table {
      overflow: hidden;
      border-radius: 22px;
      background: rgba(255, 255, 255, .92);
    }

    .modal th,
    .modal td,
    .registry-table th,
    .registry-table td,
    .admin-result-table th,
    .admin-result-table td {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(129, 94, 202, .1);
      vertical-align: top;
    }

    .modal th,
    .registry-table th,
    .admin-result-table th {
      color: var(--violet-dark);
      background: rgba(244, 238, 255, .92);
      font-weight: 800;
      position: sticky;
      top: 0;
    }

    .slot-strip {
      gap: 10px;
    }

    .slot-strip .slot {
      border-radius: 14px;
      min-width: 54px;
      min-height: 42px;
      box-shadow: inset 0 0 0 1px rgba(132, 101, 204, .12);
    }

    .login-box {
      max-width: 760px;
      margin: 0 auto;
    }

    .auth-note,
    #loginMessage {
      text-align: center;
    }

    .shift-groups {
      gap: 26px;
    }

    .shift-card {
      overflow: hidden;
      border: 1px solid rgba(128, 95, 201, .16);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 242, 255, .92));
      box-shadow: var(--shadow);
    }

    .shift-card .photo-placeholder,
    .shift-card img {
      min-height: 280px;
      background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .86), transparent 14%),
        linear-gradient(135deg, rgba(248, 242, 255, .9), rgba(236, 227, 255, .82));
    }

    .shift-card-content {
      padding: 24px 24px 26px;
    }

    .summary-chip,
    .shift-badge,
    .eyebrow {
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .18);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    }

    .admin-panel {
      padding: 30px;
    }

    .admin-section + .admin-section {
      margin-top: 20px;
    }

    .admin-section h2,
    .admin-panel .section-title,
    .bottom-registry .section-title {
      position: relative;
      z-index: 1;
    }

    .summary-grid > *,
    .admin-section,
    .bottom-registry {
      padding: 24px;
    }

    .modal.theme-training,
    .modal.theme-kukhari,
    .modal.theme-namety,
    .modal.theme-karpaty,
    .modal.theme-bulgaria,
    #loginModal {
      --modal-border: rgba(175, 143, 236, .45);
      --modal-fill: linear-gradient(180deg, rgba(255,255,255,.97), rgba(245,239,255,.96));
    }

    @media (max-width: 820px) {
      .nav {
        min-height: 76px;
      }

      .mark {
        width: 52px;
        height: 52px;
      }

      .brand-logo {
        width: 38px;
        height: 38px;
      }

      .modal {
        width: calc(100% - 18px);
        border-radius: 26px;
      }

      .modal-body {
        padding: 0 16px 18px;
      }

      .admin-panel,
      .admin-section,
      .bottom-registry,
      .filter-panel,
      .admin-filter-panel,
      .summary-grid > * {
        padding: 18px;
      }
    }
  
}
@scope (.legacy-dialog) {

    :root {
      --violet: #8c63ff;
      --violet-dark: #50318c;
      --violet-deep: #261242;
      --pink: #f08cd6;
      --pink-soft: #fceeff;
      --mint: #7ed1c0;
      --green: #69c79a;
      --green-soft: #ebfff5;
      --yellow: #f1ca63;
      --yellow-soft: #fff7dc;
      --ink: #2e2348;
      --muted: #786c95;
      --line: rgba(125, 95, 197, .18);
      --paper: rgba(255, 255, 255, .92);
      --soft: #f7f1ff;
      --sky: #eef6ff;
      --danger: #de5e7c;
      --glow: rgba(140, 99, 255, .16);
      --shadow: 0 24px 60px rgba(41, 23, 72, .16);
      --radius: 22px;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
      line-height: 1.55;
      background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .88), transparent 28%),
        radial-gradient(circle at 82% 0%, rgba(193, 172, 255, .34), transparent 24%),
        radial-gradient(circle at 50% 30%, rgba(162, 215, 255, .18), transparent 32%),
        linear-gradient(180deg, #f7f3ff 0%, #f3efff 40%, #fbfaff 100%);
      min-height: 100vh;
      position: relative;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
    }

    body::before {
      background:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, .95) 0 1px, transparent 2px),
        radial-gradient(circle at 22% 76%, rgba(180, 143, 255, .7) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 16%, rgba(255, 255, 255, .9) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 84% 64%, rgba(196, 163, 255, .7) 0 1px, transparent 2px),
        radial-gradient(circle at 56% 88%, rgba(255, 255, 255, .85) 0 1px, transparent 2px);
      opacity: .75;
    }

    body::after {
      background:
        radial-gradient(circle at 12% 80%, rgba(234, 216, 255, .55), transparent 18%),
        radial-gradient(circle at 88% 22%, rgba(215, 232, 255, .42), transparent 16%);
    }

    img {
      display: block;
      max-width: 100%;
    }

    button,
    input,
    select {
      font: inherit;
    }

    a {
      color: var(--violet-dark);
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(255, 255, 255, .6);
      background: rgba(255, 255, 255, .74);
      backdrop-filter: blur(20px);
      box-shadow: 0 14px 40px rgba(71, 38, 122, .08);
    }

    .nav {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .mark {
      width: 58px;
      height: 58px;
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      color: white;
      font-weight: 800;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15) 35%, transparent 52%),
        linear-gradient(135deg, #f4e8ff, #e5d6ff);
      box-shadow:
        inset 0 0 0 1px rgba(123, 85, 196, .12),
        0 14px 30px rgba(123, 63, 242, .18);
      flex: 0 0 auto;
      overflow: hidden;
    }

    .brand-logo {
      width: 42px;
      height: 42px;
      object-fit: cover;
      border-radius: 50%;
      filter: drop-shadow(0 6px 14px rgba(89, 46, 164, .18));
    }

    .brand strong,
    .brand span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand span {
      color: var(--muted);
      font-size: 14px;
    }

    .brand strong {
      font-size: 18px;
      letter-spacing: .01em;
    }

    .nav-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      flex: 0 0 auto;
    }

    .btn {
      border: 0;
      border-radius: var(--radius);
      min-height: 42px;
      padding: 12px 20px;
      color: white;
      cursor: pointer;
      background: linear-gradient(135deg, #7f5dff, #a472ff);
      box-shadow: 0 12px 26px rgba(123, 63, 242, .22);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      font-weight: 700;
      letter-spacing: .01em;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(123, 63, 242, .27);
    }

    .btn:disabled {
      opacity: .72;
      cursor: wait;
      transform: none;
      box-shadow: 0 8px 16px rgba(123, 63, 242, .14);
    }

    .btn.secondary {
      color: var(--violet-dark);
      background: rgba(255, 255, 255, .82);
      border: 1px solid var(--line);
      box-shadow: 0 8px 20px rgba(96, 72, 145, .08);
    }

    .btn.add {
      background: linear-gradient(135deg, #1f9d68, #38c889);
      box-shadow: 0 10px 22px rgba(31, 157, 104, .24);
    }

    .btn.view {
      background: linear-gradient(135deg, #6b38d2, #9c5cff);
      box-shadow: 0 10px 22px rgba(107, 56, 210, .24);
    }

    .btn.small {
      min-height: 34px;
      padding: 7px 12px;
      font-size: 14px;
    }

    .btn.danger {
      background: var(--danger);
    }

    .hero {
      min-height: 82vh;
      display: grid;
      align-items: end;
      position: relative;
      overflow: hidden;
      color: white;
      background:
        radial-gradient(circle at 80% 18%, rgba(255, 228, 255, .26), transparent 20%),
        radial-gradient(circle at 15% 16%, rgba(255, 255, 255, .24), transparent 18%),
        linear-gradient(90deg, rgba(25, 12, 48, .9), rgba(40, 23, 73, .68) 48%, rgba(49, 27, 84, .34)),
        url("https://indigo.family/images/%D0%A1%D0%B0%D0%B9%D1%82-%D0%92%D1%80%D0%B5%D0%BC%D1%8F-%D0%98%D0%BD%D0%B4%D0%B8%D0%B3%D0%BE/%D0%92%D0%86%D1%88%D0%BA%D0%B8/dizain-bez-nazvaniya--43-.png") center / cover;
    }

    .hero-inner {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 80px 0 72px;
    }

    .eyebrow {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      margin: 0 0 18px;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .12);
      color: rgba(255, 255, 255, .92);
      font-weight: 700;
    }

    h1 {
      max-width: 860px;
      margin: 0;
      font-size: clamp(38px, 7vw, 82px);
      line-height: .98;
      letter-spacing: 0;
    }

    .lead {
      max-width: 720px;
      margin: 22px 0 0;
      color: rgba(255, 255, 255, .9);
      font-size: 20px;
    }

    .section {
      padding: 72px 0;
    }

    .section.alt {
      background: rgba(255, 255, 255, .48);
    }

    .wrap {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    .intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
      gap: 34px;
      align-items: center;
    }

    .copy h2,
    .section-title {
      margin: 0 0 18px;
      color: var(--violet-dark);
      font-size: clamp(28px, 4vw, 48px);
      line-height: 1.08;
      letter-spacing: 0;
    }

    .copy p {
      margin: 0 0 14px;
      color: #3c314e;
      font-size: 18px;
    }

    .photo-panel {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      background: white;
    }

    .photo-panel img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .photo-caption {
      padding: 18px;
      color: var(--muted);
      background: white;
      font-weight: 700;
    }

    .shift-groups {
      display: grid;
      gap: 22px;
    }

    .group {
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .group h3 {
      margin: 0 0 16px;
      color: var(--violet-dark);
      font-size: 26px;
    }

    .group-note {
      margin: -4px 0 18px;
      padding: 14px 16px;
      border-left: 5px solid var(--yellow);
      border-radius: var(--radius);
      color: #59420d;
      background: var(--yellow-soft);
    }

    .shift-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .shift-card {
      min-height: 100%;
      padding: 18px;
      border: 2px solid var(--card-border, var(--line));
      border-radius: 24px;
      background: var(--card-gradient, #fff);
      box-shadow: 0 18px 34px rgba(54, 31, 91, .11);
      position: relative;
      overflow: hidden;
    }

    .shift-card::after {
      content: "";
      position: absolute;
      inset: auto -10% -40px auto;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .42);
      filter: blur(10px);
      pointer-events: none;
    }

    .shift-card.theme-namety {
      --card-gradient: linear-gradient(135deg, #efe6ff, #f8f1ff);
      --card-border: #cdbcf6;
    }

    .shift-card.theme-karpaty {
      --card-gradient: linear-gradient(135deg, #dff4e4, #f0fbf3);
      --card-border: #a7d1b1;
    }

    .shift-card.theme-bulgaria {
      --card-gradient: linear-gradient(135deg, #e0f3ff, #f1f9ff);
      --card-border: #a8cfe8;
    }

    .shift-card.theme-training {
      --card-gradient: linear-gradient(135deg, #fff4c8, #fff9e4);
      --card-border: #e7d27a;
    }

    .shift-card-media {
      width: calc(100% + 36px);
      margin: -18px -18px 16px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-bottom: 1px solid rgba(255, 255, 255, .65);
    }

    .shift-card-placeholder {
      width: calc(100% + 36px);
      margin: -18px -18px 16px;
      aspect-ratio: 16 / 9;
      display: grid;
      place-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, .65);
      color: rgba(67, 32, 127, .7);
      background: linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .2));
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .shift-card-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 6px 12px;
      margin-bottom: 12px;
      border-radius: 999px;
      color: var(--violet-dark);
      background: rgba(255, 255, 255, .74);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .shift-card-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
    }

    .shift-card-actions .btn {
      min-width: 132px;
    }

    .capacity-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .capacity-tags span {
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      color: var(--violet-dark);
      font-size: 13px;
      font-weight: 800;
    }

    .shift-card h4 {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.25;
    }

    .meta {
      display: grid;
      gap: 6px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .capacity-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      color: var(--violet-dark);
      font-weight: 800;
    }

    .public-capacity {
      display: grid;
      gap: 5px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
      color: var(--violet-dark);
      font-weight: 750;
    }

    .login-box {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 12px;
      align-items: end;
      margin-top: 24px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: var(--shadow);
    }

    .field {
      display: grid;
      gap: 7px;
    }

    label {
      color: var(--violet-dark);
      font-size: 14px;
      font-weight: 800;
    }

    input,
    select {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px 12px;
      color: var(--ink);
      background: white;
      outline: none;
    }

    input:focus,
    select:focus {
      border-color: var(--violet);
      box-shadow: 0 0 0 3px rgba(123, 63, 242, .13);
    }

    .message {
      margin-top: 12px;
      color: var(--danger);
      font-weight: 700;
    }

    .login-hint {
      margin-top: 14px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .magic-toast {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(35, 27, 55, .42);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
    }

    .magic-toast-card {
      width: min(620px, 100%);
      padding: clamp(26px, 5vw, 46px);
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: var(--radius);
      color: white;
      text-align: center;
      background: linear-gradient(135deg, var(--violet), var(--pink), var(--mint));
      box-shadow: 0 24px 70px rgba(35, 27, 55, .36);
      transform: scale(.94) translateY(16px);
      transition: transform .24s ease;
    }

    .magic-toast.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .magic-toast.visible .magic-toast-card {
      transform: scale(1) translateY(0);
    }

    .magic-toast strong {
      display: block;
      margin-bottom: 12px;
      font-size: clamp(26px, 5vw, 42px);
      line-height: 1.05;
    }

    .magic-toast span {
      display: block;
      font-size: clamp(18px, 3vw, 24px);
      line-height: 1.35;
    }

    .private {
      display: none;
    }

    .private.visible {
      display: block;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin: 0 0 22px;
    }

    .choice-panel {
      margin: 0 0 24px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: var(--shadow);
    }

    .system-panel,
    .admin-panel,
    .admin-filter-panel,
    .training-panel,
    .registry-panel,
    .guest-panel {
      margin: 0 0 24px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: var(--shadow);
    }

    .system-panel {
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .choice-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
      gap: 14px;
      align-items: end;
    }

    .admin-grid,
    .registry-form,
    .training-form,
    .guest-form {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
    }

    .guest-form {
      grid-template-columns: minmax(150px, 1fr) minmax(140px, .7fr) minmax(140px, .7fr) auto;
    }

    .training-form {
      grid-template-columns: minmax(220px, .95fr) minmax(220px, 1fr) minmax(220px, 1fr);
      align-items: end;
    }

    .training-form .modal-block-title,
    .add-master-form .modal-block-title {
      grid-column: 1 / -1;
      margin-bottom: 4px;
    }

    .training-form .field:last-of-type {
      grid-column: 1 / 2;
    }

    .training-form .btn {
      grid-column: 2 / 4;
      width: 100%;
      align-self: end;
      justify-self: stretch;
    }

    .day-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .day-checks label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 38px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      color: var(--ink);
      background: var(--soft);
      font-size: 14px;
    }

    .day-checks input {
      width: auto;
      min-height: auto;
    }

    .small-note {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .star-note {
      color: #8f2455;
      font-weight: 900;
    }

    .selected-shift {
      display: grid;
      gap: 8px;
      margin-top: 18px;
      padding: 16px;
      border-radius: var(--radius);
      color: var(--violet-dark);
      background: linear-gradient(90deg, var(--soft), var(--sky));
      font-weight: 700;
    }

    .slot-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
      gap: 8px;
      padding: 16px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .slot-number {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      color: var(--violet-dark);
      background: var(--soft);
      font-weight: 900;
    }

    .slot-number.busy.fixed {
      color: #11613d;
      background: var(--green-soft);
      border-color: #a8e7c4;
    }

    .slot-number.extra,
    .slot-number.busy.extra {
      color: #8f2455;
      background: var(--pink-soft);
      border-color: #ffafd0;
    }

    .slot-number.busy.question {
      color: #674800;
      background: var(--yellow-soft);
      border-color: #f5d579;
    }

    .empty-state {
      padding: 26px;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      color: var(--muted);
      background: rgba(255, 255, 255, .8);
      font-weight: 700;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 10px;
      border-radius: var(--radius);
      font-weight: 800;
      font-size: 13px;
      white-space: nowrap;
    }

    .status-pill.fixed,
    .row-fixed {
      background: var(--green-soft);
      color: #11613d;
    }

    .status-pill.extra,
    .row-extra {
      background: var(--pink-soft);
      color: #8f2455;
    }

    .status-pill.question,
    .row-question {
      background: var(--yellow-soft);
      color: #674800;
    }

    .table-block {
      margin: 26px 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .compact-stack {
      display: grid;
      gap: 14px;
    }

    .event-details {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .event-details summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 16px 18px;
      cursor: pointer;
      list-style: none;
    }

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

    .event-details[open] summary {
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .event-title {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .event-title h3,
    .event-title h4 {
      margin: 0;
      color: var(--violet-dark);
      font-size: 20px;
      line-height: 1.2;
    }

    .event-title span {
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .event-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
    }

    .event-metrics span {
      min-height: 28px;
      padding: 5px 9px;
      border-radius: var(--radius);
      color: var(--violet-dark);
      background: var(--soft);
      font-size: 13px;
      font-weight: 850;
    }

    .event-toggle {
      color: var(--violet-dark);
      font-weight: 900;
      white-space: nowrap;
    }

    .event-details[open] .event-toggle {
      color: var(--mint);
      font-size: 0;
    }

    .event-details[open] .event-toggle::before {
      content: "Закрити";
      font-size: 16px;
    }

    .table-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 18px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .table-head h3 {
      margin: 0;
      color: var(--violet-dark);
      font-size: 22px;
    }

    .table-wrap {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 760px;
    }

    th,
    td {
      padding: 12px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
    }

    th {
      color: var(--violet-dark);
      background: #fff;
      font-size: 14px;
      text-transform: uppercase;
    }

    td:first-child,
    th:first-child {
      width: 76px;
      text-align: center;
      font-weight: 800;
    }

    tr:last-child td {
      border-bottom: 0;
    }

    .slot-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .slot-actions .btn {
      box-shadow: none;
    }

    .add-master-form {
      display: grid;
      grid-template-columns: minmax(170px, 1fr) minmax(130px, .55fr) minmax(170px, .7fr) auto;
      gap: 10px;
      align-items: end;
      padding: 16px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .waiting-list {
      padding: 16px;
      border-top: 1px solid var(--line);
      background: #fffdf7;
    }

    .waiting-list h4 {
      margin: 0 0 12px;
      color: #674800;
      font-size: 18px;
    }

    .waiting-list ul {
      display: grid;
      gap: 8px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .empty-row {
      color: var(--muted);
      background: #fff;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin: 0 0 30px;
    }

    .registry-table td:first-child,
    .registry-table th:first-child,
    .admin-result-table td:first-child,
    .admin-result-table th:first-child {
      width: auto;
      text-align: left;
    }

    .summary-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
      overflow: hidden;
    }

    .summary-card summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 18px;
      cursor: pointer;
      list-style: none;
    }

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

    .summary-card h4 {
      margin: 0 0 8px;
      color: var(--violet-dark);
      font-size: 18px;
    }

    .summary-card[open] summary {
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .numbers {
      display: grid;
      gap: 8px;
      color: var(--muted);
    }

    .numbers strong {
      color: var(--ink);
    }

    .progress {
      height: 10px;
      margin: 14px 0 0;
      overflow: hidden;
      border-radius: 999px;
      background: #eee8f7;
    }

    .progress span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--green), var(--yellow));
    }

    .summary-toggle {
      color: var(--violet-dark);
      font-weight: 900;
      white-space: nowrap;
    }

    .summary-card[open] .summary-toggle {
      color: var(--mint);
    }

    .summary-card[open] .summary-toggle::before {
      content: "Закрити";
    }

    .summary-card[open] .summary-toggle {
      font-size: 0;
    }

    .summary-card[open] .summary-toggle::before {
      font-size: 16px;
    }

    .summary-list {
      display: grid;
      gap: 10px;
      padding: 16px 18px 18px;
      margin: 0;
      list-style: none;
    }

    .summary-person {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: var(--radius);
      font-weight: 800;
    }

    .summary-person .slot {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .72);
    }

    .summary-empty {
      padding: 16px 18px 18px;
      color: var(--muted);
      font-weight: 700;
    }

    .footer-note {
      margin-top: 24px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: white;
      color: var(--muted);
    }

    .hero-meta-form {
      margin-top: 18px;
    }

    .hero-meta-form textarea,
    .admin-grid textarea {
      width: 100%;
      min-height: 120px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      color: var(--ink);
      background: white;
      resize: vertical;
      outline: none;
      font: inherit;
    }

    .hero-meta-form textarea:focus,
    .admin-grid textarea:focus {
      border-color: var(--violet);
      box-shadow: 0 0 0 3px rgba(123, 63, 242, .13);
    }

    .public-toolbar {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .filter-panel {
      margin: 0 0 24px;
      padding: 20px;
      border: 1px solid #ddd6f7;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(247, 243, 255, .95), rgba(233, 248, 255, .92));
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .filter-grid {
      display: grid;
      grid-template-columns: minmax(180px, .5fr) minmax(220px, .8fr);
      gap: 14px;
      align-items: end;
    }

    .bottom-registry {
      margin-top: 20px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 12px 28px rgba(54, 31, 91, .08);
    }

    .bottom-registry p {
      margin: 10px 0 0;
      color: var(--muted);
    }

    .registry-summary summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      cursor: pointer;
      list-style: none;
    }

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

    .registry-summary[open] summary {
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, var(--soft), var(--sky));
    }

    .modal {
      width: min(1100px, calc(100vw - 24px));
      max-width: 1100px;
      padding: 0;
      border: 3px solid var(--modal-border, #ddd6f7);
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(35, 27, 55, .3);
      background: var(--modal-fill, white);
    }

    .modal::backdrop {
      background: rgba(35, 27, 55, .58);
      backdrop-filter: blur(8px);
    }

    .modal-head {
      display: flex;
      justify-content: flex-end;
      padding: 14px 14px 0;
      background: transparent;
    }

    .modal-body {
      max-height: calc(100vh - 180px);
      overflow: auto;
      padding: 4px 20px 20px;
      background: transparent;
    }

    .modal-close {
      min-width: 42px;
      min-height: 42px;
      border: 0;
      border-radius: 12px;
      color: var(--violet-dark);
      background: rgba(255, 255, 255, .9);
      border: 2px solid rgba(255, 255, 255, .7);
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
    }

    .modal-grid {
      display: grid;
      gap: 18px;
    }

    .modal-title-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: baseline;
      margin-bottom: 8px;
      padding: 0 4px;
      color: var(--ink);
    }

    .modal-title-row strong {
      font-size: 22px;
      line-height: 1.12;
    }

    .modal-title-row span {
      color: #5e5371;
      font-size: 15px;
      font-weight: 700;
    }

    .modal-subline {
      margin: 0 0 12px;
      padding: 0 4px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .modal-content-block {
      padding: 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(67, 32, 127, .12);
    }

    .modal-content-block + .modal-content-block {
      margin-top: 10px;
    }

    .modal-block-title {
      margin: 0 0 10px;
      color: var(--violet-dark);
      font-size: 16px;
      font-weight: 900;
    }

    .master-form-card {
      border: 2px solid rgba(106, 56, 210, .24);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(244, 236, 255, .92)),
        linear-gradient(135deg, rgba(122, 63, 242, .08), rgba(255, 95, 159, .05));
      box-shadow: 0 16px 34px rgba(106, 56, 210, .12);
      position: relative;
      overflow: hidden;
    }

    .master-form-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 6px;
      background: linear-gradient(180deg, #7b3ff2, #ff79b1);
      border-radius: 18px 0 0 18px;
    }

    .master-form-card::after {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(123, 63, 242, .14);
      border-radius: 14px;
      pointer-events: none;
    }

    .master-form-card .modal-block-title {
      padding-left: 8px;
      font-size: 17px;
    }

    .modal .add-master-form,
    .modal .training-form {
      padding: 16px;
      gap: 12px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 242, 255, .92));
      border-radius: 18px;
    }

    .modal .guest-form {
      padding: 0;
      border: 0;
      background: transparent;
      gap: 10px;
    }

    .modal .add-master-form {
      grid-template-columns: minmax(210px, 1fr) minmax(170px, .85fr) minmax(210px, 1fr) auto;
      align-items: end;
    }

    .modal .add-master-form .btn {
      min-width: 180px;
      align-self: end;
    }

    .registry-master-name {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-weight: 800;
    }

    .deleted-note {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 4px 9px;
      border-radius: 999px;
      color: #9f1737;
      background: #ffe4ec;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .registry-event-list {
      display: grid;
      gap: 8px;
      min-width: 280px;
    }

    .registry-status-stack {
      display: grid;
      gap: 4px;
      line-height: 1.35;
    }

    .registry-status-stack strong {
      color: var(--violet-dark);
      font-size: 14px;
    }

    .registry-status-stack span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .registry-event-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border: 1px solid rgba(67, 32, 127, .1);
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(247, 243, 255, .92), rgba(255, 255, 255, .98));
    }

    .registry-event-item.fixed {
      border-color: #a8e7c4;
      background: linear-gradient(135deg, #e7faef, #f5fdf8);
    }

    .registry-event-item.question {
      border-color: #d8c8f3;
      background: linear-gradient(135deg, #f4ecff, #fbf7ff);
    }

    .registry-event-item.extra {
      border-color: #f2db8d;
      background: linear-gradient(135deg, #fff6d8, #fffbf0);
    }

    .registry-event-item.deleted {
      border-color: #f3b1c1;
      background: linear-gradient(135deg, #fff1f5, #fff8fa);
    }

    .registry-event-item.guest {
      border-color: #dfcfb8;
      background: linear-gradient(135deg, #f8efe5, #fdf8f1);
    }

    .registry-master-name.only-deleted {
      color: #9f1737;
    }

    .registry-separator td {
      background: linear-gradient(90deg, rgba(248, 239, 229, .95), rgba(255, 248, 241, .98));
      color: #77563a;
      font-weight: 900;
      letter-spacing: .03em;
    }

    .registry-event-number {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: var(--violet-dark);
      background: rgba(123, 63, 242, .1);
      font-size: 13px;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .registry-event-text {
      min-width: 0;
      color: #362b48;
      font-weight: 700;
      line-height: 1.35;
    }

    .registry-event-item.deleted {
      border-color: #f3b1c1;
      background: linear-gradient(135deg, #fff1f5, #fff8fa);
    }

    .modal .field {
      gap: 5px;
    }

    .modal label {
      font-size: 13px;
    }

    .modal input,
    .modal select {
      min-height: 42px;
      border-radius: 14px;
      padding: 9px 12px;
    }

    .modal .btn {
      min-height: 44px;
      border-radius: 14px;
    }

    .modal .table-wrap {
      border-radius: 16px;
      overflow: auto;
      background: rgba(255, 255, 255, .7);
    }

    .modal table {
      min-width: 640px;
    }

    .modal th,
    .modal td {
      padding: 10px 12px;
    }

    .modal .slot-strip {
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(67, 32, 127, .08);
      background: rgba(255, 255, 255, .6);
      margin-bottom: 10px;
    }

    .modal .waiting-list,
    .modal .guest-panel {
      margin-top: 10px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(67, 32, 127, .08);
      background: rgba(255, 255, 255, .56);
    }

    .modal .waiting-list h4,
    .modal .guest-panel h4 {
      margin: 0 0 8px;
      font-size: 16px;
    }

    .modal .small-note {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.35;
    }

    .modal .summary-list {
      padding: 8px 0 0;
    }

    .modal .summary-person {
      grid-template-columns: 34px minmax(0, 1fr) auto auto;
      padding: 8px 10px;
      font-size: 14px;
    }

    .modal .summary-person .slot {
      width: 28px;
      height: 28px;
    }

    .modal.theme-training {
      --modal-border: #ef9dc6;
      --modal-fill: linear-gradient(180deg, #ffe9f4, #fff5fa);
    }

    .modal.theme-karpaty {
      --modal-border: #8fc69c;
      --modal-fill: linear-gradient(180deg, #e8f7ec, #f5fcf7);
    }

    .modal.theme-kukhari,
    .modal.theme-namety {
      --modal-border: #baa7ea;
      --modal-fill: linear-gradient(180deg, #f2ebff, #faf7ff);
    }

    .modal.theme-bulgaria {
      --modal-border: #93c4e8;
      --modal-fill: linear-gradient(180deg, #e8f6ff, #f5fbff);
    }

    .auth-note {
      margin-top: 10px;
      color: var(--muted);
      font-size: 14px;
      text-align: center;
    }

    .admin-section {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

    .hidden {
      display: none !important;
    }

    .gated {
      display: none;
    }

    .gated.visible {
      display: block;
    }

    @media (max-width: 900px) {
      .intro-grid,
      .shift-list,
      .login-box,
      .filter-grid,
      .choice-grid,
      .admin-grid,
      .registry-form,
      .training-form,
      .guest-form,
      .summary-grid {
        grid-template-columns: 1fr;
      }

      .hero {
        min-height: 76vh;
      }
    }

    @media (max-width: 640px) {
      .nav {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 0;
      }

      .nav-actions {
        width: 100%;
        justify-content: stretch;
      }

      .nav-actions .btn {
        flex: 1 1 auto;
      }

      .hero-inner {
        padding: 64px 0 54px;
      }

      .section {
        padding: 52px 0;
      }

      .group,
      .login-box {
        padding: 18px;
      }

      .lead,
      .copy p {
        font-size: 17px;
      }

      .modal-body {
        padding: 2px 12px 14px;
      }

      .modal-content-block {
        padding: 12px;
      }

      .summary-card summary,
      .event-details summary,
      .summary-person {
        grid-template-columns: 1fr;
      }

      .summary-toggle {
        white-space: normal;
      }

      .add-master-form {
        grid-template-columns: 1fr;
      }

      .training-form {
        grid-template-columns: 1fr;
      }

      .training-form .modal-block-title,
      .training-form .field:last-of-type,
      .training-form .btn,
      .add-master-form .modal-block-title {
        grid-column: auto;
      }

      .modal .add-master-form {
        grid-template-columns: 1fr;
      }

      .modal .add-master-form .btn {
        grid-column: auto;
        min-width: 0;
      }

      .shift-card-media {
        width: calc(100% + 36px);
      }

      table {
        min-width: 620px;
      }

      .magic-toast {
        padding: 16px;
      }
    }
    .wrap,
    .filter-panel,
    .admin-panel,
    .admin-filter-panel,
    .bottom-registry,
    .summary-grid > *,
    .photo-panel,
    .shift-card,
    .login-box,
    .modal-content-block,
    .table-wrap,
    .registry-table-wrap,
    .summary-card {
      border-radius: 28px;
    }

    .filter-panel,
    .admin-panel,
    .admin-filter-panel,
    .bottom-registry,
    .summary-grid > *,
    .photo-panel,
    .shift-card,
    .login-box,
    .modal-content-block,
    .table-wrap,
    .summary-card {
      border: 1px solid rgba(129, 94, 202, .14);
      background: rgba(255, 255, 255, .78);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .public-toolbar,
    .toolbar,
    .bottom-registry,
    .admin-section,
    .summary-grid > *,
    .filter-panel,
    .admin-filter-panel {
      position: relative;
      overflow: hidden;
    }

    .public-toolbar::before,
    .toolbar::before,
    .bottom-registry::before,
    .admin-section::before,
    .summary-grid > *::before,
    .filter-panel::before,
    .admin-filter-panel::before,
    .modal::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .92), transparent 18%),
        radial-gradient(circle at 82% 0%, rgba(228, 215, 255, .74), transparent 18%);
      pointer-events: none;
    }

    .section-title,
    .copy h2,
    .modal-title-row strong,
    .modal h3,
    .modal h4 {
      letter-spacing: .01em;
    }

    .filter-panel,
    .admin-filter-panel,
    .bottom-registry,
    .admin-section {
      padding: 24px;
    }

    .public-toolbar {
      margin-bottom: 18px;
    }

    .field label,
    .modal label,
    .small-note,
    .login-hint,
    .modal-kicker {
      color: var(--violet-dark);
      font-weight: 700;
      letter-spacing: .01em;
    }

    input,
    select,
    textarea,
    .modal input,
    .modal select {
      width: 100%;
      min-height: 52px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(129, 94, 202, .16);
      background: rgba(255, 255, 255, .88);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    textarea,
    .admin-grid textarea {
      min-height: 132px;
      resize: vertical;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .modal input:focus,
    .modal select:focus,
    .admin-grid textarea:focus {
      outline: none;
      border-color: rgba(127, 93, 255, .46);
      box-shadow: 0 0 0 4px rgba(140, 99, 255, .12);
    }

    .hero-inner,
    .intro-grid,
    .filter-grid,
    .admin-grid,
    .registry-form,
    .modal-grid {
      position: relative;
      z-index: 1;
    }

    .modal {
      width: min(1100px, calc(100% - 36px));
      padding: 0;
      overflow: hidden;
      border-radius: 34px;
      border: 1px solid rgba(174, 145, 234, .5);
      background:
        radial-gradient(circle at top right, rgba(237, 226, 255, .85), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 244, 255, .94));
      box-shadow: 0 34px 90px rgba(38, 18, 66, .34);
    }

    .modal::backdrop {
      background:
        radial-gradient(circle at center, rgba(130, 95, 220, .12), transparent 30%),
        rgba(24, 11, 48, .48);
      backdrop-filter: blur(9px);
    }

    .modal-head {
      min-height: 70px;
      padding: 18px 22px 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .modal-body {
      padding: 0 28px 30px;
    }

    .modal-close {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      color: var(--violet-dark);
      border: 1px solid rgba(143, 104, 222, .18);
      box-shadow: 0 10px 24px rgba(76, 41, 137, .12);
      font-size: 28px;
      line-height: 1;
    }

    .modal-summary,
    .modal-title-row,
    .modal-subline {
      text-align: center;
      justify-content: center;
    }

    .modal-summary {
      margin: 0 auto 24px;
      max-width: 760px;
    }

    .modal-title-row {
      gap: 12px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .modal-title-row strong {
      font-size: clamp(26px, 4vw, 40px);
    }

    .modal-title-row span,
    .modal-subline {
      color: var(--muted);
    }

    .modal-grid,
    .summary-grid,
    .filter-grid {
      gap: 18px;
    }

    .modal-content-block {
      padding: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(245, 239, 255, .9));
    }

    .modal-block-title {
      margin-bottom: 14px;
      font-size: 20px;
      text-align: left;
    }

    .modal .add-master-form,
    .modal .training-form,
    .modal .guest-form,
    .login-box {
      padding: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(247, 241, 255, .9));
      border: 1px solid rgba(132, 101, 204, .12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    .modal .add-master-form {
      border-left: 6px solid rgba(140, 99, 255, .5);
    }

    .modal .guest-form {
      border-left: 6px solid rgba(156, 122, 255, .32);
    }

    .modal .btn,
    .login-box .btn {
      width: 100%;
      justify-content: center;
    }

    .table-wrap,
    .registry-table-wrap {
      overflow: auto;
      padding: 12px;
      background: rgba(255, 255, 255, .82);
    }

    table {
      border-collapse: separate;
      border-spacing: 0;
    }

    .modal table,
    .registry-table,
    .admin-result-table {
      overflow: hidden;
      border-radius: 22px;
      background: rgba(255, 255, 255, .92);
    }

    .modal th,
    .modal td,
    .registry-table th,
    .registry-table td,
    .admin-result-table th,
    .admin-result-table td {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(129, 94, 202, .1);
      vertical-align: top;
    }

    .modal th,
    .registry-table th,
    .admin-result-table th {
      color: var(--violet-dark);
      background: rgba(244, 238, 255, .92);
      font-weight: 800;
      position: sticky;
      top: 0;
    }

    .slot-strip {
      gap: 10px;
    }

    .slot-strip .slot {
      border-radius: 14px;
      min-width: 54px;
      min-height: 42px;
      box-shadow: inset 0 0 0 1px rgba(132, 101, 204, .12);
    }

    .login-box {
      max-width: 760px;
      margin: 0 auto;
    }

    .auth-note,
    #loginMessage {
      text-align: center;
    }

    .shift-groups {
      gap: 26px;
    }

    .shift-card {
      overflow: hidden;
      border: 1px solid rgba(128, 95, 201, .16);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 242, 255, .92));
      box-shadow: var(--shadow);
    }

    .shift-card .photo-placeholder,
    .shift-card img {
      min-height: 280px;
      background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .86), transparent 14%),
        linear-gradient(135deg, rgba(248, 242, 255, .9), rgba(236, 227, 255, .82));
    }

    .shift-card-content {
      padding: 24px 24px 26px;
    }

    .summary-chip,
    .shift-badge,
    .eyebrow {
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .18);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    }

    .admin-panel {
      padding: 30px;
    }

    .admin-section + .admin-section {
      margin-top: 20px;
    }

    .admin-section h2,
    .admin-panel .section-title,
    .bottom-registry .section-title {
      position: relative;
      z-index: 1;
    }

    .summary-grid > *,
    .admin-section,
    .bottom-registry {
      padding: 24px;
    }

    .modal.theme-training,
    .modal.theme-kukhari,
    .modal.theme-namety,
    .modal.theme-karpaty,
    .modal.theme-bulgaria,
    #loginModal {
      --modal-border: rgba(175, 143, 236, .45);
      --modal-fill: linear-gradient(180deg, rgba(255,255,255,.97), rgba(245,239,255,.96));
    }

    @media (max-width: 820px) {
      .nav {
        min-height: 76px;
      }

      .mark {
        width: 52px;
        height: 52px;
      }

      .brand-logo {
        width: 38px;
        height: 38px;
      }

      .modal {
        width: calc(100% - 18px);
        border-radius: 26px;
      }

      .modal-body {
        padding: 0 16px 18px;
      }

      .admin-panel,
      .admin-section,
      .bottom-registry,
      .filter-panel,
      .admin-filter-panel,
      .summary-grid > * {
        padding: 18px;
      }
    }
  
}