:root {
      color-scheme: light;
      font-family: "Avenir Next", "Helvetica Neue", sans-serif;
      --page-bg: #f7f5ef;
      --ink: #16284d;
      --muted: #50658f;
      --accent-top: #4d57ff;
      --accent-bottom: #3c35e6;
      --panel: rgba(255, 255, 255, 0.88);
      --line: rgba(39, 68, 125, 0.1);
      --line-strong: rgba(39, 68, 125, 0.16);
      --surface-soft: rgba(255, 255, 255, 0.82);
      --surface-raised: rgba(255, 255, 255, 0.94);
      --chip-surface: #f5f8ff;
      --radius-xs: 14px;
      --radius-sm: 18px;
      --radius-md: 22px;
      --radius-lg: 24px;
      --space-1: 12px;
      --space-2: 16px;
      --space-3: 24px;
      --space-4: 32px;
      --shadow-soft: 0 10px 24px rgba(22, 40, 77, 0.08);
      --shadow-lift: 0 18px 38px rgba(60, 53, 230, 0.14);
      --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    body {
      margin: 0;
      min-height: 100vh;
      padding: clamp(18px, 3vw, 32px);
      overflow-y: auto;
      scrollbar-gutter: stable both-edges;
      background:
        radial-gradient(circle at top, rgba(121, 174, 255, 0.18), transparent 30%),
        var(--page-bg);
    }

    .app-shell {
      width: 100%;
      min-height: calc(100vh - 64px);
      display: block;
      position: relative;
    }

    .screen {
      width: 100%;
      max-width: min(760px, 100%);
      overflow: visible;
      padding: clamp(28px, 4vw, 40px) clamp(18px, 3vw, 24px);
      text-align: center;
      position: relative;
      inset: auto;
      margin: 0 auto;
      height: auto;
      display: none;
    }

    .screen-rich {
      padding-top: 20px;
      padding-bottom: 24px;
    }

    .screen-rich .logo {
      margin-bottom: 18px;
      width: min(100%, 250px);
    }

    .screen-rich .form-text {
      margin-bottom: 18px;
    }

    .screen.is-active {
      display: block;
      animation: screenFade 0.28s ease;
    }

    @keyframes screenFade {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .topbar {
      position: fixed;
      top: clamp(16px, 2vw, 22px);
      right: clamp(16px, 2.2vw, 28px);
      z-index: 20;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .topbar.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .login-button {
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      padding: 13px 20px;
      background: var(--surface-raised);
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      color: var(--ink);
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
    }

    .login-button:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 36px rgba(22, 40, 77, 0.12);
    }

    .hero-lcdc {
      max-width: min(1460px, 100%);
      min-height: calc(100vh - 64px);
      padding: clamp(16px, 2.2vh, 24px) clamp(24px, 4vw, 44px);
      display: none;
      align-items: center;
      justify-content: flex-start;
      gap: clamp(4px, 0.7vh, 8px);
      overflow: hidden;
      isolation: isolate;
    }

    .hero-lcdc.is-active {
      display: flex;
      flex-direction: column;
    }

    .hero-backdrop {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .hero-glow,
    .hero-orb {
      position: absolute;
      border-radius: 999px;
    }

    .hero-glow--primary {
      left: 50%;
      top: 48%;
      width: clamp(560px, 52vw, 700px);
      height: clamp(560px, 52vw, 700px);
      transform: translate(-50%, -50%);
      background:
        radial-gradient(circle at center, rgba(77, 136, 255, 0.22), transparent 58%),
        radial-gradient(circle at 55% 42%, rgba(91, 76, 255, 0.12), transparent 46%);
      filter: blur(14px);
      opacity: 0.9;
      animation: heroGlowPulse 12s ease-in-out infinite;
    }

    .hero-glow--secondary {
      left: 50%;
      top: 44%;
      width: clamp(420px, 36vw, 540px);
      height: clamp(420px, 36vw, 540px);
      transform: translate(-48%, -44%);
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.56), transparent 58%);
      filter: blur(8px);
      opacity: 0.54;
    }

    .hero-orb--left {
      left: 13%;
      top: 72%;
      width: clamp(28px, 3vw, 46px);
      height: clamp(28px, 3vw, 46px);
      background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.92), rgba(112, 152, 255, 0.62) 44%, rgba(112, 152, 255, 0.14) 74%);
      box-shadow: 0 22px 36px rgba(67, 101, 187, 0.16);
      opacity: 0.74;
      animation: heroOrbDriftLeft 16s ease-in-out infinite;
    }

    .hero-orb--right {
      right: 12%;
      top: 46%;
      width: clamp(34px, 3.4vw, 54px);
      height: clamp(34px, 3.4vw, 54px);
      background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.92), rgba(119, 158, 255, 0.58) 42%, rgba(119, 158, 255, 0.12) 74%);
      box-shadow: 0 24px 40px rgba(67, 101, 187, 0.16);
      opacity: 0.7;
      animation: heroOrbDriftRight 18s ease-in-out infinite;
    }

    .hero-lcdc .logo {
      position: relative;
      z-index: 8;
      width: min(100%, 224px);
      margin: 0 auto;
    }

    .hero-visual,
    .hero-visual3d {
      position: relative;
      z-index: 4;
      width: min(1080px, 96vw);
      height: clamp(340px, 42vh, 400px);
      margin-bottom: clamp(24px, 3vh, 34px);
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1200px;
      transform-style: preserve-3d;
    }

    .hero-visual3d::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 48%;
      width: clamp(500px, 52vw, 660px);
      height: clamp(500px, 52vw, 660px);
      transform: translate(-50%, -52%);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.42);
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 58%, transparent 76%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
      opacity: 0.58;
      pointer-events: none;
      z-index: 1;
    }

    .hero-visual3d::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 48px;
      width: 68%;
      height: 92px;
      transform: translateX(-50%);
      background: radial-gradient(circle at center, rgba(77, 136, 255, 0.18), transparent 72%);
      filter: blur(24px);
      opacity: 0.88;
      pointer-events: none;
      z-index: 1;
    }

    .hero-object-wrap,
    .floating-card-wrap,
    .hotel-key-card-wrap {
      transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
      transform-style: preserve-3d;
      will-change: transform;
    }

    .hero-object-wrap {
      position: relative;
      z-index: 3;
      width: clamp(332px, 29vw, 380px);
      height: clamp(244px, 21.5vw, 284px);
    }

    .hero-object-motion {
      position: absolute;
      inset: 0;
      animation: heroNotebookFloat 8s ease-in-out infinite;
      transform-style: preserve-3d;
      will-change: transform;
    }

    .lcdc-notebook-scene {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
    }

    .lcdc-notebook-shadow {
      position: absolute;
      left: 52%;
      bottom: 18px;
      width: 72%;
      height: 56px;
      transform: translateX(-50%);
      background: radial-gradient(circle at center, rgba(16, 37, 74, 0.24), rgba(77, 125, 255, 0.16) 42%, transparent 72%);
      filter: blur(22px);
      opacity: 0.9;
      z-index: 1;
    }

    .lcdc-notebook-pages {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 78%;
      height: 84%;
      border-radius: 28px;
      background: linear-gradient(180deg, #f8fbff 0%, #e4efff 62%, #bfd1ff 100%);
      box-shadow: 0 30px 60px rgba(27, 58, 118, 0.18);
      transform: translate3d(-43%, -40%, -24px) rotateX(8deg) rotateY(-4deg) rotateZ(-5deg);
      z-index: 2;
    }

    .lcdc-notebook-pages::before {
      content: "";
      position: absolute;
      inset: 10px 10px 12px;
      border-radius: 22px;
      border: 1px solid rgba(142, 174, 255, 0.52);
      opacity: 0.58;
    }

    .lcdc-notebook-edge {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 78%;
      height: 84%;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(101, 150, 255, 0.88), rgba(78, 112, 255, 0.55));
      box-shadow: 0 18px 30px rgba(60, 93, 186, 0.16);
      transform: translate3d(-47%, -45%, -10px) rotateX(8deg) rotateY(-4deg) rotateZ(-5deg);
      z-index: 3;
    }

    .lcdc-notebook {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 78%;
      height: 84%;
      padding: 32px 28px;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(145deg, #182d58 0%, #0d2348 46%, #071936 100%);
      box-shadow:
        0 40px 90px rgba(16, 37, 74, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -18px 40px rgba(0, 0, 0, 0.22);
      transform: translate(-50%, -50%) rotateX(8deg) rotateY(-4deg) rotateZ(-5deg);
      overflow: hidden;
      z-index: 4;
    }

    .lcdc-notebook::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(circle at 22% 16%, rgba(255, 255, 255, 0.22), transparent 24%),
        radial-gradient(circle at 78% 74%, rgba(82, 126, 255, 0.16), transparent 22%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 7px);
      opacity: 0.92;
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .lcdc-notebook::after {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: 14px;
      height: 24px;
      border-radius: 999px;
      background: radial-gradient(circle at center, rgba(89, 140, 255, 0.88), rgba(89, 140, 255, 0.18) 46%, transparent 74%);
      filter: blur(10px);
      opacity: 0.85;
      pointer-events: none;
    }

    .lcdc-notebook-spine {
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      width: 24px;
      border-radius: 22px 0 0 22px;
      background: linear-gradient(180deg, rgba(109, 150, 255, 0.94), rgba(39, 94, 235, 0.84));
      box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.38), inset -6px 0 10px rgba(9, 28, 68, 0.28);
      opacity: 0.96;
    }

    .lcdc-notebook-mark {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      text-align: center;
      z-index: 1;
      transform: translateZ(22px);
    }

    .lcdc-notebook-mark-icon {
      width: 72px;
      height: 72px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(118, 164, 255, 0.95), rgba(61, 106, 230, 0.86));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 18px 32px rgba(18, 44, 96, 0.24);
    }

    .lcdc-notebook-mark-icon svg {
      width: 34px;
      height: 34px;
      display: block;
      color: #ffffff;
    }

    .lcdc-notebook-mark-title {
      color: #f7fbff;
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(3rem, 4.1vw, 4rem);
      line-height: 0.92;
      letter-spacing: -0.04em;
      text-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
    }

    .lcdc-notebook-mark-subtitle {
      color: rgba(224, 235, 255, 0.82);
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.18em;
    }

    .hotel-key-card-wrap {
      position: absolute;
      left: 12%;
      bottom: 2%;
      width: 146px;
      height: 178px;
      z-index: 6;
      transform-style: preserve-3d;
      animation: hotelKeyFloat 9s ease-in-out infinite 0.2s;
    }

    .hotel-key-card {
      position: absolute;
      inset: 0 26px 8px 0;
      padding: 20px 18px;
      border-radius: 26px;
      background: linear-gradient(145deg, #fffaf1 0%, #eedfc5 54%, #d8b484 100%);
      border: 1px solid rgba(197, 149, 81, 0.26);
      box-shadow: 0 24px 44px rgba(106, 84, 52, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transform: rotateX(8deg) rotateZ(-9deg);
      overflow: hidden;
    }

    .hotel-key-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.56), transparent 40%),
        radial-gradient(circle at 74% 78%, rgba(209, 170, 113, 0.18), transparent 24%);
      pointer-events: none;
    }

    .hotel-key-card-copy {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      color: #aa7d46;
    }

    .hotel-key-card-monogram {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      border: 1px solid rgba(170, 125, 70, 0.34);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: #bc8d53;
      background: rgba(255, 255, 255, 0.2);
    }

    .hotel-key-card-title {
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: 1.85rem;
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .hotel-key-card-stars {
      font-size: 0.86rem;
      letter-spacing: 0.24em;
      font-weight: 700;
    }

    .hotel-key-ring {
      position: absolute;
      left: -4px;
      bottom: -6px;
      width: 82px;
      height: 82px;
      display: block;
    }

    .hotel-key-ring::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 6px;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 4px solid rgba(129, 113, 92, 0.84);
      box-shadow: 0 10px 16px rgba(63, 49, 33, 0.14);
    }

    .hotel-key-medal {
      position: absolute;
      left: 28px;
      bottom: 0;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, #d8b27c 0%, #b78953 100%);
      color: #fff6e8;
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: 1.75rem;
      font-weight: 700;
      box-shadow: 0 16px 24px rgba(98, 72, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    }

    .floating-card-wrap {
      position: absolute;
      z-index: 5;
    }

    .floating-card-wrap[data-card="reception"] {
      left: -10%;
      top: 18%;
    }

    .floating-card-wrap[data-card="maintenance"] {
      right: -4%;
      top: 8%;
    }

    .floating-card-wrap[data-card="client"] {
      right: -1%;
      bottom: 4%;
    }

    .floating-card-motion {
      transform-style: preserve-3d;
      will-change: transform;
    }

    .floating-card-wrap[data-card="reception"] .floating-card-motion {
      animation: floatingReception 7.5s ease-in-out infinite;
    }

    .floating-card-wrap[data-card="maintenance"] .floating-card-motion {
      animation: floatingMaintenance 8.5s ease-in-out infinite 0.4s;
    }

    .floating-card-wrap[data-card="client"] .floating-card-motion {
      animation: floatingClient 9.2s ease-in-out infinite 0.8s;
    }

    .floating-card {
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 14px;
      min-width: 250px;
      max-width: 290px;
      padding: 16px 18px;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
      backdrop-filter: blur(20px) saturate(145%);
      -webkit-backdrop-filter: blur(20px) saturate(145%);
      border: 1px solid rgba(117, 156, 255, 0.25);
      box-shadow: 0 28px 70px rgba(18, 45, 92, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65);
      text-align: left;
    }

    .floating-card-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: linear-gradient(135deg, #6b8dff 0%, #4b35f5 100%);
      color: #ffffff;
      box-shadow: 0 12px 26px rgba(75, 53, 245, 0.22);
    }

    .floating-card-icon svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    .floating-card-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .floating-card-type {
      color: rgba(16, 37, 74, 0.66);
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .floating-card-title {
      color: var(--ink);
      font-size: 1rem;
      line-height: 1.28;
      font-weight: 700;
    }

    .floating-card-text {
      color: rgba(16, 37, 74, 0.72);
      font-size: 0.92rem;
      line-height: 1.35;
      font-weight: 500;
    }

    .hero-copy {
      position: relative;
      z-index: 8;
      display: grid;
      gap: 6px;
      justify-items: center;
      width: 100%;
      margin-top: 0;
    }

    .logo {
      display: block;
      width: min(100%, 360px);
      margin: 0 auto 28px;
    }

    .logo.is-hidden {
      display: none;
    }

    .hero-title {
      max-width: 860px;
      margin: 0;
      color: #10254a;
      font-family: inherit;
      font-size: clamp(2.05rem, 2.8vw, 2.8rem);
      line-height: 1.06;
      font-weight: 740;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .hero-text {
      max-width: 720px;
      margin: 0;
      color: rgba(16, 37, 74, 0.68);
      font-size: clamp(0.98rem, 1.25vw, 1.08rem);
      line-height: 1.42;
      font-weight: 560;
    }

    .hero-kicker {
      color: var(--accent-bottom);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hero-actions {
      display: grid;
      justify-items: center;
      gap: 10px;
      justify-content: center;
      width: min(100%, 560px);
    }

    .hero-trust-note {
      margin: 0;
      color: #71809a;
      font-size: 0.76rem;
      font-weight: 680;
      line-height: 1.4;
      text-align: center;
    }

    .hero-tutorial-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 36px;
      padding: 5px 10px;
      color: rgba(22, 40, 77, 0.72);
      font-size: 0.86rem;
      font-weight: 720;
      text-decoration: none;
      transition: color 0.22s ease, transform 0.22s ease;
    }

    .hero-tutorial-link svg {
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
    }

    .hero-tutorial-link:hover,
    .hero-tutorial-link:focus-visible {
      color: var(--accent-bottom);
      transform: translateY(-1px);
    }

    .hero-tutorial-link:focus-visible {
      outline: 3px solid rgba(77, 87, 255, 0.24);
      outline-offset: 3px;
      border-radius: 8px;
    }

    .cta-button,
    .form-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: min(100%, 560px);
      border: 0;
      padding: 22px 32px;
      border-radius: var(--radius-md);
      background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bottom) 100%);
      color: #ffffff;
      font-size: 1.15rem;
      font-weight: 500;
      cursor: pointer;
      box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, 0.18);
      transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    }

    .cta-button {
      min-height: 58px;
      border-radius: var(--radius-md);
      background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bottom) 100%);
      font-size: 1.15rem;
      font-weight: 500;
      box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .cta-button:hover,
    .form-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 20px 38px rgba(60, 53, 230, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 24px 48px rgba(60, 53, 230, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .startup-showcase {
      position: relative;
      z-index: 5;
      width: min(1040px, 96vw);
      height: clamp(326px, 40vh, 380px);
      transform-style: preserve-3d;
      transform: rotateX(5deg) rotateY(-7deg);
      animation: startupShowcaseFloat 10s ease-in-out infinite;
    }

    .startup-showcase::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -24px;
      width: 74%;
      height: 74px;
      transform: translateX(-50%) rotateX(72deg);
      border-radius: 999px;
      background: radial-gradient(circle at center, rgba(60, 53, 230, 0.18), rgba(77, 87, 255, 0.08) 44%, transparent 74%);
      filter: blur(18px);
      opacity: 0.95;
    }

    .startup-panel {
      position: absolute;
      inset: 0;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(117, 137, 176, 0.22);
      background: #f5f7fb;
      box-shadow:
        0 42px 110px rgba(21, 41, 86, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
      transform-style: preserve-3d;
      overflow: hidden;
    }

    .startup-panel::before {
      content: none;
    }

    .startup-panel-top {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }

    .startup-window-dots {
      display: inline-flex;
      gap: 7px;
    }

    .startup-window-dots span {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(93, 112, 150, 0.24);
    }

    .startup-window-dots span:nth-child(1) {
      background: rgba(77, 87, 255, 0.28);
    }

    .startup-window-dots span:nth-child(2) {
      background: rgba(77, 87, 255, 0.18);
    }

    .startup-window-dots span:nth-child(3) {
      background: rgba(77, 87, 255, 0.1);
    }

    .startup-panel-brand {
      color: rgba(16, 37, 74, 0.62);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .startup-slide-stack {
      position: relative;
      z-index: 2;
      height: calc(100% - 32px);
      transform-style: preserve-3d;
    }

    .startup-slide {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 0.72fr 1.5fr;
      gap: 18px;
      opacity: 0;
      transform: translate3d(0, 18px, -80px) rotateX(4deg) scale(0.96);
      animation: startupSlideShow 18s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .startup-slide:nth-child(2) {
      animation-delay: 6s;
    }

    .startup-slide:nth-child(3) {
      animation-delay: 12s;
    }

    .startup-slide-copy,
    .startup-slide-board {
      min-width: 0;
      border: 1px solid rgba(120, 140, 180, 0.14);
      border-radius: 14px;
      background: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .startup-slide-copy {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
      padding: 22px;
    }

    .startup-slide-label {
      width: fit-content;
      padding: 8px 11px;
      border-radius: 7px;
      background: rgba(77, 87, 255, 0.09);
      color: var(--accent-bottom);
      font-size: 0.76rem;
      font-weight: 800;
    }

    .startup-slide-copy h2 {
      margin: 0;
      color: #10254a;
      font-family: inherit;
      font-size: clamp(1.55rem, 2.4vw, 2.4rem);
      line-height: 1.08;
      font-weight: 700;
      letter-spacing: 0;
    }

    .startup-slide-copy p {
      margin: 0;
      color: rgba(16, 37, 74, 0.62);
      font-size: 0.98rem;
      line-height: 1.48;
      font-weight: 650;
    }

    .startup-slide-metric {
      display: flex;
      align-items: baseline;
      gap: 8px;
      color: #10254a;
    }

    .startup-slide-metric strong {
      font-size: 2.1rem;
      line-height: 1;
    }

    .startup-slide-metric span {
      color: rgba(16, 37, 74, 0.54);
      font-size: 0.84rem;
      font-weight: 800;
    }

    .startup-slide-board {
      display: grid;
      align-content: start;
      gap: 12px;
      padding: 16px;
      overflow: hidden;
    }

    .startup-board-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 3px 2px 8px;
    }

    .startup-board-head strong {
      color: #10254a;
      font-size: 1rem;
    }

    .startup-board-head span {
      color: rgba(16, 37, 74, 0.48);
      font-size: 0.8rem;
      font-weight: 800;
    }

    .startup-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 66px;
      padding: 12px;
      border: 1px solid rgba(117, 137, 176, 0.13);
      border-radius: 10px;
      background: #ffffff;
      box-shadow: 0 7px 18px rgba(22, 40, 77, 0.045);
    }

    .startup-row-icon {
      width: 42px;
      height: 42px;
      border-radius: 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, var(--accent-top), var(--accent-bottom));
      color: #ffffff;
      font-size: 1rem;
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(60, 53, 230, 0.16);
    }

    .startup-row-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .startup-row-copy strong,
    .startup-row-copy span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .startup-row-copy strong {
      color: #10254a;
      font-size: 0.94rem;
      font-weight: 850;
    }

    .startup-row-copy span {
      color: rgba(16, 37, 74, 0.54);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .startup-row-pill {
      padding: 7px 9px;
      border-radius: 999px;
      background: rgba(77, 87, 255, 0.08);
      color: var(--accent-bottom);
      font-size: 0.74rem;
      font-weight: 850;
      white-space: nowrap;
    }

    .startup-progress {
      position: absolute;
      left: 50%;
      bottom: -14px;
      z-index: 4;
      display: flex;
      gap: 8px;
      transform: translateX(-50%) translateZ(60px);
    }

    .startup-progress span {
      width: 32px;
      height: 4px;
      border-radius: 999px;
      background: rgba(77, 87, 255, 0.12);
      overflow: hidden;
    }

    .startup-progress span::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent-top), var(--accent-bottom));
      transform: scaleX(0);
      transform-origin: left;
      animation: startupProgress 18s linear infinite;
    }

    .startup-progress span:nth-child(2)::before {
      animation-delay: 6s;
    }

    .startup-progress span:nth-child(3)::before {
      animation-delay: 12s;
    }

    @keyframes startupShowcaseFloat {
      0%,
      100% {
        transform: rotateX(5deg) rotateY(-7deg) translate3d(0, 0, 0);
      }

      50% {
        transform: rotateX(4deg) rotateY(-5deg) translate3d(0, -7px, 0);
      }
    }

    @keyframes startupSlideShow {
      0% {
        opacity: 0;
        transform: translate3d(0, 18px, -80px) rotateX(4deg) scale(0.96);
      }

      5%,
      30% {
        opacity: 1;
        transform: translate3d(0, 0, 36px) rotateX(0deg) scale(1);
      }

      35%,
      100% {
        opacity: 0;
        transform: translate3d(0, -18px, -90px) rotateX(-4deg) scale(0.96);
      }
    }

    @keyframes startupProgress {
      0% {
        transform: scaleX(0);
      }

      31% {
        transform: scaleX(1);
      }

      33%,
      100% {
        transform: scaleX(0);
      }
    }

    body.is-home-screen {
      background:
        linear-gradient(142deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 248, 255, 0.92) 27%, rgba(237, 243, 255, 0.88) 52%, rgba(247, 245, 255, 0.90) 74%, rgba(255, 255, 255, 0.96) 100%),
        #f8f8fb;
      background-attachment: fixed;
    }

    .visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .hero-lcdc {
      overflow: visible;
      padding-bottom: clamp(52px, 7vw, 92px);
    }

    .hero-backdrop {
      background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.42) 0%, rgba(232, 242, 255, 0.30) 46%, rgba(239, 235, 255, 0.34) 73%, rgba(255, 255, 255, 0.34) 100%);
    }

    body.is-home-screen .hero-visual,
    body.is-home-screen .hero-visual3d {
      width: min(1080px, 96vw);
      height: clamp(390px, 46vh, 470px);
      margin-bottom: clamp(8px, 1.5vh, 16px);
      perspective: none;
    }

    .hero-visual3d::before,
    .hero-visual3d::after {
      content: none;
    }

    .startup-showcase {
      display: none !important;
    }

    .product-book-stage {
      position: relative;
      width: min(1040px, 96vw);
      height: 100%;
      min-height: 380px;
      isolation: isolate;
      touch-action: pan-y;
    }

    .product-book-canvas {
      display: block;
      width: 100%;
      height: 100%;
      outline: 0;
    }

    .product-book-meta {
      position: absolute;
      left: 50%;
      bottom: -2px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 34px;
      padding: 6px 12px;
      border: 1px solid rgba(74, 91, 132, 0.12);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: 0 10px 24px rgba(32, 52, 94, 0.08);
      backdrop-filter: blur(14px) saturate(125%);
      -webkit-backdrop-filter: blur(14px) saturate(125%);
      transform: translateX(-50%);
      color: rgba(22, 40, 77, 0.72);
      font-size: 0.78rem;
      font-weight: 760;
      white-space: nowrap;
      pointer-events: none;
    }

    .product-book-dots {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .product-book-dots span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(22, 40, 77, 0.18);
      transition: width 0.35s ease, border-radius 0.35s ease, background 0.35s ease;
    }

    .product-book-dots span.is-active {
      width: 18px;
      border-radius: 3px;
      background: var(--accent-bottom);
    }

    .home-story {
      position: relative;
      z-index: 6;
      width: min(1160px, 100%);
      margin-top: clamp(48px, 5vw, 64px);
      padding-top: clamp(40px, 4vw, 48px);
      scroll-margin-top: 48px;
      border-top: 1px solid rgba(39, 68, 125, 0.13);
      text-align: left;
    }

    .home-story-intro {
      display: grid;
      justify-items: center;
      gap: 12px;
      max-width: 720px;
      margin: 0 auto clamp(42px, 6vw, 68px);
      text-align: center;
    }

    .home-story-eyebrow,
    .home-founder-story > div > span {
      color: var(--accent-bottom);
      font-size: 0.78rem;
      font-weight: 820;
      text-transform: uppercase;
    }

    .home-story-intro h2 {
      margin: 0;
      color: var(--ink);
      font-size: clamp(2rem, 3.4vw, 2.75rem);
      line-height: 1.08;
      font-weight: 750;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .home-story-intro p {
      max-width: 650px;
      margin: 0;
      color: rgba(22, 40, 77, 0.68);
      font-size: clamp(1rem, 1.4vw, 1.12rem);
      line-height: 1.6;
      font-weight: 560;
    }

    .home-story-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-bottom: 1px solid rgba(39, 68, 125, 0.14);
    }

    .home-story-tab {
      position: relative;
      min-height: 54px;
      border: 0;
      padding: 0 18px;
      background: transparent;
      color: rgba(22, 40, 77, 0.5);
      font: inherit;
      font-size: 0.92rem;
      font-weight: 760;
      cursor: pointer;
      transition: color 0.24s ease, background 0.24s ease;
    }

    .home-story-tab::after {
      content: "";
      position: absolute;
      left: 20%;
      right: 20%;
      bottom: -1px;
      height: 2px;
      background: var(--accent-bottom);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    .home-story-tab:hover,
    .home-story-tab:focus-visible,
    .home-story-tab.is-active {
      color: var(--ink);
    }

    .home-story-tab:focus-visible {
      outline: 2px solid rgba(77, 87, 255, 0.34);
      outline-offset: -2px;
    }

    .home-story-tab.is-active::after {
      transform: scaleX(1);
    }

    .home-story-panels {
      min-height: 470px;
    }

    .home-story-panel {
      display: none;
      grid-template-columns: minmax(280px, 0.78fr) minmax(520px, 1.22fr);
      gap: clamp(42px, 7vw, 92px);
      align-items: center;
      min-height: 470px;
      padding: clamp(54px, 7vw, 86px) 0;
    }

    .home-story-panel.is-active {
      display: grid;
      animation: homeStoryReveal 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes homeStoryReveal {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .home-story-copy {
      display: grid;
      gap: 16px;
    }

    .home-story-number {
      color: var(--accent-bottom);
      font-size: 0.78rem;
      font-weight: 850;
    }

    .home-story-copy h3,
    .home-founder-story h3 {
      margin: 0;
      color: var(--ink);
      font-size: clamp(1.65rem, 2.5vw, 2.2rem);
      line-height: 1.15;
      font-weight: 750;
      letter-spacing: 0;
    }

    .home-story-copy p,
    .home-founder-story p {
      margin: 0;
      color: rgba(22, 40, 77, 0.68);
      font-size: 1rem;
      line-height: 1.62;
      font-weight: 560;
    }

    .home-story-copy ul {
      display: grid;
      gap: 10px;
      margin: 4px 0 0;
      padding: 0;
      list-style: none;
    }

    .home-story-copy li {
      position: relative;
      padding-left: 20px;
      color: rgba(22, 40, 77, 0.78);
      font-size: 0.92rem;
      line-height: 1.45;
      font-weight: 650;
    }

    .home-story-copy li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.55em;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent-bottom);
    }

    .home-product-preview {
      min-width: 0;
      padding: 18px;
      border: 1px solid rgba(39, 68, 125, 0.14);
      border-radius: 8px;
      background: #f4f6fa;
      box-shadow: 0 24px 58px rgba(22, 40, 77, 0.11);
    }

    .home-preview-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 48px;
      padding: 0 4px 14px;
      color: var(--ink);
    }

    .home-preview-toolbar strong {
      font-size: 1rem;
      font-weight: 780;
    }

    .home-preview-toolbar span {
      color: rgba(22, 40, 77, 0.54);
      font-size: 0.78rem;
      font-weight: 700;
    }

    .home-preview-search {
      min-height: 48px;
      margin-bottom: 12px;
      padding: 14px 16px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      color: rgba(22, 40, 77, 0.42);
      font-size: 0.84rem;
      font-weight: 600;
    }

    .home-preview-note {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 86px;
      margin-top: 10px;
      padding: 12px 14px;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-left: 3px solid var(--accent-bottom);
      border-radius: 8px;
      background: #ffffff;
    }

    .home-preview-note.is-memo {
      border-left-color: #23765a;
    }

    .home-preview-note-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #f0f1ff;
      color: var(--accent-bottom);
      font-size: 0.72rem;
      font-weight: 850;
    }

    .home-preview-note > span:nth-child(2) {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .home-preview-note strong {
      color: var(--ink);
      font-size: 0.9rem;
      font-weight: 760;
    }

    .home-preview-note small {
      overflow: hidden;
      color: rgba(22, 40, 77, 0.56);
      font-size: 0.76rem;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-preview-note em,
    .home-operation-row em {
      padding: 7px 9px;
      border-radius: 6px;
      background: #f0f1ff;
      color: var(--accent-bottom);
      font-size: 0.68rem;
      font-style: normal;
      font-weight: 800;
      white-space: nowrap;
    }

    .home-preview-alerts {
      display: flex;
      gap: 8px;
      padding: 14px 0 18px;
      border-top: 1px solid rgba(39, 68, 125, 0.1);
    }

    .home-preview-alerts span {
      padding: 8px 10px;
      border-radius: 6px;
      background: #fff0f0;
      color: #a63d3d;
      font-size: 0.72rem;
      font-weight: 820;
    }

    .home-preview-detail,
    .home-preview-status {
      display: grid;
      gap: 7px;
      padding: 18px;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #ffffff;
    }

    .home-preview-detail span,
    .home-preview-status span,
    .home-operation-row > span {
      color: rgba(22, 40, 77, 0.5);
      font-size: 0.72rem;
      font-weight: 760;
    }

    .home-preview-detail strong,
    .home-preview-status strong,
    .home-operation-row strong {
      color: var(--ink);
      font-size: 0.94rem;
      line-height: 1.35;
      font-weight: 750;
    }

    .home-preview-status {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      margin-top: 12px;
    }

    .home-preview-status strong {
      color: var(--accent-bottom);
      font-size: 0.76rem;
    }

    .home-product-preview.is-operations {
      display: grid;
      gap: 10px;
    }

    .home-operation-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 7px 16px;
      min-height: 92px;
      padding: 16px 18px;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-left: 3px solid #a16b21;
      border-radius: 8px;
      background: #ffffff;
    }

    .home-operation-row > span,
    .home-operation-row strong {
      grid-column: 1;
    }

    .home-operation-row em {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
    }

    .home-operation-row.is-group {
      border-left-color: var(--accent-bottom);
    }

    .home-operation-row.is-precheckin {
      border-left-color: #23765a;
    }

    .home-operation-row.is-taxi em {
      background: #fff6e8;
      color: #8b5a18;
    }

    .home-operation-row.is-precheckin em {
      background: #eaf7f1;
      color: #23765a;
    }

    .home-founder-story {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      margin-top: clamp(34px, 5vw, 60px);
      padding: clamp(42px, 6vw, 68px) clamp(4px, 1vw, 12px);
      border-top: 1px solid rgba(39, 68, 125, 0.13);
      border-bottom: 1px solid rgba(39, 68, 125, 0.13);
      text-align: center;
    }

    .home-founder-story > div {
      display: grid;
      justify-items: center;
      gap: 10px;
      max-width: 760px;
    }

    body.is-home-screen .legal-footer {
      position: relative;
      left: auto;
      bottom: auto;
      margin: 0 auto 4px;
      transform: none;
    }

    @media (max-width: 900px) {
      .home-story-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        min-height: 0;
      }

      .home-story-panels {
        min-height: 0;
      }

      .home-story-copy {
        max-width: 620px;
      }
    }

    @media (min-width: 901px) and (max-height: 800px) {
      body.is-home-screen .hero-visual,
      body.is-home-screen .hero-visual3d {
        height: clamp(250px, 38vh, 300px);
        margin-bottom: 8px;
      }

      body.is-home-screen .product-book-stage {
        min-height: 250px;
      }

      body.is-home-screen .home-story {
        margin-top: 24px;
        padding-top: 24px;
      }
    }

    @media (max-width: 620px) {
      body.is-home-screen .hero-lcdc {
        padding-top: 48px;
      }

      body.is-home-screen .hero-visual,
      body.is-home-screen .hero-visual3d {
        height: 270px;
      }

      body.is-home-screen .product-book-stage {
        width: min(420px, 96vw);
        min-height: 270px;
      }

      .product-book-meta {
        bottom: -3px;
      }

      body.is-home-screen .home-story {
        margin-top: 0;
        padding-top: 8px;
      }

      .home-story-tabs {
        position: relative;
      }

      .home-story-tab {
        min-height: 50px;
        padding: 0 8px;
        font-size: 0.82rem;
      }

      .home-story-panel {
        padding: 42px 0 54px;
      }

      .home-product-preview {
        padding: 12px;
      }

      .home-preview-note {
        grid-template-columns: 36px minmax(0, 1fr);
      }

      .home-preview-note-index {
        width: 36px;
        height: 36px;
      }

      .home-preview-note em {
        display: none;
      }

      .home-preview-status {
        grid-template-columns: minmax(0, 1fr);
      }

      .home-operation-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .home-operation-row em {
        grid-column: 1;
        grid-row: auto;
        width: fit-content;
      }

      .home-founder-story {
        grid-template-columns: minmax(0, 1fr);
      }

      .home-founder-story h3 {
        font-size: 1.55rem;
      }

      body.is-home-screen .legal-footer {
        margin-bottom: 0;
      }
    }

    @keyframes heroNotebookFloat {
      0%,
      100% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
      }

      50% {
        transform: translate3d(0, -10px, 0) rotateX(1.5deg) rotateY(-1.5deg);
      }
    }

    @keyframes hotelKeyFloat {
      0%,
      100% {
        transform: translate3d(0, 0, 0) rotateZ(0deg);
      }

      50% {
        transform: translate3d(0, -6px, 0) rotateZ(-1deg);
      }
    }

    @keyframes heroGlowPulse {
      0%,
      100% {
        opacity: 0.84;
        transform: translate(-50%, -50%) scale(1);
      }

      50% {
        opacity: 0.96;
        transform: translate(-50%, -50%) scale(1.04);
      }
    }

    @keyframes heroOrbDriftLeft {
      0%,
      100% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(8px, -14px, 0);
      }
    }

    @keyframes heroOrbDriftRight {
      0%,
      100% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(-10px, 12px, 0);
      }
    }

    @keyframes floatingReception {
      0%,
      100% {
        transform: translate3d(0, -8px, 0) rotateX(-2deg) rotateY(4deg) rotateZ(-7deg);
      }

      50% {
        transform: translate3d(0, 10px, 0) rotateX(2deg) rotateY(-3deg) rotateZ(-5deg);
      }
    }

    @keyframes floatingMaintenance {
      0%,
      100% {
        transform: translate3d(0, 6px, 0) rotateX(3deg) rotateY(-4deg) rotateZ(6deg);
      }

      50% {
        transform: translate3d(0, -12px, 0) rotateX(-2deg) rotateY(3deg) rotateZ(4deg);
      }
    }

    @keyframes floatingClient {
      0%,
      100% {
        transform: translate3d(0, -6px, 0) rotateX(-3deg) rotateY(-2deg) rotateZ(7deg);
      }

      50% {
        transform: translate3d(0, 12px, 0) rotateX(2deg) rotateY(5deg) rotateZ(5deg);
      }
    }

    .form-title {
      margin: 0 0 12px;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.8rem, 4vw, 2.7rem);
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .title-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .title-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(77, 87, 255, 0.10) 0%, rgba(60, 53, 230, 0.16) 100%);
      color: #3048a8;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }

    .title-icon svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    .form-text {
      max-width: 420px;
      margin: 0 auto 26px;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.7;
    }

    .field {
      margin: 0 auto 20px;
      max-width: 560px;
      text-align: left;
    }

    .field-grid {
      width: min(100%, 560px);
      margin: 0 auto 20px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .field-grid .field {
      width: 100%;
      max-width: none;
      margin: 0;
    }

    .field-label {
      display: block;
      margin-bottom: 10px;
      color: #31476f;
      font-size: 0.92rem;
      font-weight: 600;
    }

    .field-input {
      width: 100%;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      padding: 18px 18px;
      background: var(--surface-raised);
      color: var(--ink);
      font-size: 1rem;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .field-input:focus {
      border-color: rgba(77, 87, 255, 0.45);
      box-shadow: 0 0 0 5px rgba(77, 87, 255, 0.10);
    }

    .verification-email {
      color: var(--ink);
      font-weight: 800;
      white-space: nowrap;
    }

    .code-input {
      text-align: center;
      font-size: 1.28rem;
      font-weight: 800;
      letter-spacing: 0.28em;
    }

    .field-textarea {
      min-height: 148px;
      resize: vertical;
      font-family: inherit;
    }

    .data-guard {
      width: min(760px, 100%);
      margin: 0 auto 18px;
      padding: 14px 16px;
      border: 1px solid rgba(65, 105, 255, 0.16);
      border-radius: var(--radius-sm);
      background: rgba(65, 105, 255, 0.07);
      color: #31476f;
      font-size: 0.9rem;
      line-height: 1.55;
      text-align: left;
      box-shadow: var(--shadow-inset);
    }

    .data-guard strong {
      color: var(--ink);
      font-weight: 800;
    }

    .legal-consent {
      width: min(560px, 100%);
      margin: 0 auto 18px;
      padding: 14px 16px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--surface-soft);
      color: #31476f;
      font-size: 0.9rem;
      line-height: 1.5;
      text-align: left;
    }

    .legal-consent input {
      width: 18px;
      height: 18px;
      margin: 2px 0 0;
      accent-color: var(--accent-bottom);
    }

    .legal-inline-button {
      border: 0;
      padding: 0;
      background: transparent;
      color: #3157d5;
      font: inherit;
      font-weight: 750;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .turnstile-wrap {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 16px auto 2px;
      overflow: hidden;
    }

    .turnstile-wrap:empty {
      display: none;
    }

    .priority-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--surface-soft);
      box-shadow: var(--shadow-inset);
      text-align: left;
    }

    .priority-stack {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      max-width: 560px;
      margin: 0 auto 20px;
    }

    .priority-stack[hidden] {
      display: none;
    }

    .priority-copy {
      display: grid;
      gap: 2px;
    }

    .priority-title {
      color: var(--ink);
      font-size: 0.98rem;
      font-weight: 700;
    }

    .priority-text {
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.45;
    }

    .priority-toggle {
      position: relative;
      width: 54px;
      height: 32px;
      flex: 0 0 auto;
    }

    .priority-toggle input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
      margin: 0;
    }

    .priority-track {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: rgba(80, 101, 143, 0.18);
      transition: background 0.2s ease;
    }

    .priority-track::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #ffffff;
      box-shadow: 0 4px 10px rgba(22, 40, 77, 0.16);
      transition: transform 0.2s ease;
    }

    .priority-toggle input:checked + .priority-track {
      background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bottom) 100%);
    }

    .priority-toggle input:checked + .priority-track::after {
      transform: translateX(22px);
    }

    #screen-note.is-general-note {
      width: min(100%, 720px);
      padding-top: clamp(28px, 5vw, 54px);
    }

    #screen-note.is-general-note .flow-logo {
      display: none;
    }

    #screen-note.is-general-note .form-title {
      justify-content: center;
      margin-bottom: 6px;
      font-size: 1.08rem;
      line-height: 1.25;
      font-weight: 800;
    }

    #screen-note.is-general-note .form-text {
      max-width: 430px;
      margin: 0 auto 16px;
      font-size: 0.86rem;
      line-height: 1.45;
    }

    #screen-note.is-general-note #note-form {
      display: grid;
      gap: 14px;
      max-width: 640px;
      margin: 0 auto;
    }

    #screen-note.is-general-note .data-guard {
      margin-bottom: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.72);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    #screen-note.is-general-note .priority-stack {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      margin: 0;
    }

    #screen-note.is-general-note .priority-row {
      min-height: 58px;
      padding: 12px 14px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 14px 34px rgba(15, 35, 75, 0.06);
    }

    #screen-note.is-general-note .priority-title {
      font-size: 0.94rem;
      font-weight: 790;
    }

    #screen-note.is-general-note .priority-text {
      font-size: 0.8rem;
      line-height: 1.35;
    }

    #screen-note.is-general-note .field-label {
      font-size: 0.82rem;
    }

    #screen-note.is-general-note .field-input {
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.86);
    }

    #screen-note.is-general-note .field-textarea {
      min-height: 184px;
    }

    body.general-note-open {
      overflow: hidden;
    }

    body.general-note-open #screen-board {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 0;
      width: 100vw;
      max-width: none;
      height: 100dvh;
      margin: 0;
      padding: clamp(18px, 3vw, 32px);
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      transform: none;
      pointer-events: none;
      overflow: hidden;
    }

    body.general-note-open #screen-note.is-general-note.is-active {
      position: fixed;
      inset: 0;
      z-index: 2;
      width: 100vw;
      max-width: none;
      height: 100dvh;
      display: grid;
      align-content: center;
      justify-content: center;
      padding: clamp(24px, 4vw, 48px);
      overflow-y: auto;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
    }

    body.general-note-open #screen-note.is-general-note.is-active #note-form,
    body.general-note-open #screen-note.is-general-note.is-active .form-title,
    body.general-note-open #screen-note.is-general-note.is-active .form-text {
      width: min(640px, calc(100vw - 40px));
    }

    @media (max-width: 640px) {
      body.general-note-open #screen-note.is-general-note.is-active {
        align-content: start;
        padding-top: 68px;
      }

      body.general-note-open #screen-note.is-general-note.is-active #note-form,
      body.general-note-open #screen-note.is-general-note.is-active .form-title,
      body.general-note-open #screen-note.is-general-note.is-active .form-text {
        width: min(100%, calc(100vw - 32px));
      }
    }

    .general-note-shell,
    .general-note-date-shell {
      display: contents;
    }

    .general-note-progress,
    .general-note-date-progress {
      display: none;
    }

    #screen-note.is-general-note[data-general-step="compose"] .general-note-options-step,
    #screen-note.is-general-note[data-general-step="options"] .general-note-compose-step,
    #screen-note.is-checkout-note[data-general-step="compose"] .general-note-options-step,
    #screen-note.is-checkout-note[data-general-step="options"] .general-note-compose-step {
      display: none;
    }

    body.general-note-open #screen-board {
      opacity: 0.78;
      filter: blur(2px) saturate(96%);
    }

    body.general-note-open #screen-note.is-general-note.is-active,
    body.general-note-date-open #screen-note-date.is-active {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(18px, 4vw, 44px);
      overflow-y: auto;
      background: rgba(247, 249, 253, 0.42);
      backdrop-filter: blur(1.6px) saturate(98%);
      -webkit-backdrop-filter: blur(1.6px) saturate(98%);
    }

    body.general-note-date-open #screen-note-date.is-active {
      position: fixed;
      inset: 0;
      z-index: 2;
      width: 100vw;
      max-width: none;
      height: 100dvh;
      margin: 0;
    }

    body.general-note-open #screen-note.is-general-note.is-active .general-note-shell,
    body.general-note-date-open #screen-note-date.is-active .general-note-date-shell {
      display: block;
      width: min(690px, calc(100vw - 36px));
      max-height: calc(100dvh - 36px);
      overflow-y: auto;
      padding: clamp(26px, 4vw, 42px);
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      scrollbar-width: thin;
    }

    body.general-note-open #screen-note.is-general-note.is-active .general-note-progress,
    body.general-note-date-open #screen-note-date.is-active .general-note-date-progress {
      width: min(190px, 42vw);
      margin: 0 auto 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .general-note-progress span,
    .general-note-date-progress span {
      height: 3px;
      border-radius: 999px;
      background: rgba(59, 76, 116, 0.14);
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .general-note-progress span.is-current,
    .general-note-progress span.is-complete,
    .general-note-date-progress span.is-current,
    .general-note-date-progress span.is-complete {
      background: var(--accent-bottom);
    }

    .general-note-progress span.is-current,
    .general-note-date-progress span.is-current {
      transform: scaleY(1.35);
    }

    body.general-note-open #screen-note.is-general-note.is-active .form-title,
    body.general-note-date-open #screen-note-date.is-active .form-title {
      width: 100%;
      margin-bottom: 7px;
      font-size: clamp(1.55rem, 3vw, 2rem);
      letter-spacing: 0;
    }

    body.general-note-open #screen-note.is-general-note.is-active .form-text,
    body.general-note-date-open #screen-note-date.is-active .form-text {
      width: 100%;
      max-width: 480px;
      margin-bottom: 24px;
      font-size: 0.94rem;
      line-height: 1.55;
    }

    body.general-note-open #screen-note.is-general-note.is-active #note-form {
      width: 100%;
      max-width: none;
      gap: 0;
    }

    #screen-note.is-general-note .general-note-step {
      width: 100%;
      animation: generalNoteStepIn 220ms ease both;
    }

    #screen-note.is-general-note .data-guard {
      width: 100%;
      margin-bottom: 18px;
      padding: 12px 14px;
      border-color: rgba(67, 83, 140, 0.12);
      background: #f7f8fc;
      box-shadow: none;
    }

    #screen-note.is-general-note .field {
      width: 100%;
      max-width: none;
      margin-bottom: 0;
    }

    #screen-note.is-general-note .field-textarea {
      min-height: 190px;
      padding: 17px 18px;
      line-height: 1.55;
      resize: vertical;
    }

    #screen-note.is-general-note .priority-stack {
      width: 100%;
      max-width: none;
      gap: 0;
      overflow: hidden;
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: #ffffff;
    }

    #screen-note.is-general-note .priority-row {
      min-height: 76px;
      padding: 15px 17px;
      border: 0;
      border-bottom: 1px solid rgba(26, 51, 96, 0.09);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    #screen-note.is-general-note .priority-row:last-child {
      border-bottom: 0;
    }

    #screen-note.is-general-note .general-note-error {
      margin: 8px 0 0;
      text-align: left;
    }

    #screen-note.is-general-note .general-note-actions,
    body.general-note-date-open #screen-note-date.is-active .form-actions {
      margin-top: 12px;
      padding-top: 18px;
      border-top: 1px solid rgba(26, 51, 96, 0.09);
      justify-content: space-between;
      flex-wrap: nowrap;
    }

    #screen-note.is-general-note .general-note-actions .form-button,
    body.general-note-date-open #screen-note-date.is-active .form-button {
      min-width: 200px;
    }

    body.general-note-date-open #screen-note-date.is-active .logo {
      display: none;
    }

    body.general-note-date-open #screen-note-date.is-active .general-note-date-shell {
      width: min(600px, calc(100vw - 36px));
    }

    body.general-note-date-open #screen-note-date.is-active #note-date-form .field {
      width: min(360px, 100%);
      margin-bottom: 0;
    }

    @keyframes generalNoteStepIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 640px) {
      body.general-note-open #screen-note.is-general-note.is-active,
      body.general-note-date-open #screen-note-date.is-active {
        align-items: flex-start;
        padding: 12px;
      }

      body.general-note-open #screen-note.is-general-note.is-active .general-note-shell,
      body.general-note-date-open #screen-note-date.is-active .general-note-date-shell {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 24px 18px 20px;
      }

      #screen-note.is-general-note .priority-row {
        min-height: 72px;
        padding: 13px 14px;
      }

      #screen-note.is-general-note .priority-copy {
        padding-right: 8px;
      }

      #screen-note.is-general-note .general-note-actions,
      body.general-note-date-open #screen-note-date.is-active .form-actions {
        gap: 10px;
      }

      #screen-note.is-general-note .general-note-actions .form-button,
      body.general-note-date-open #screen-note-date.is-active .form-button {
        min-width: 0;
        flex: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #screen-note.is-general-note .general-note-step {
        animation: none;
      }
    }

    .field-error {
      min-height: 22px;
      margin: 10px 0 0;
      color: #d14343;
      font-size: 0.92rem;
    }

    .form-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
    }

    .form-button {
      width: auto;
      min-width: 240px;
    }

    .form-link-row {
      display: flex;
      justify-content: flex-end;
      width: min(100%, 560px);
      margin: -8px auto 22px;
    }

    .form-link-button {
      border: 0;
      padding: 0;
      background: transparent;
      color: #4169ff;
      font: inherit;
      font-size: 0.92rem;
      font-weight: 800;
      cursor: pointer;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .form-link-button:hover {
      color: #3048d8;
      transform: translateY(-1px);
    }

    .ghost-button {
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      padding: 16px 22px;
      background: var(--surface-raised);
      color: #31476f;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
    }

    .text-button {
      border: 0;
      padding: 0;
      background: transparent;
      color: #5d7097;
      font-size: 0.98rem;
      font-weight: 600;
      cursor: pointer;
    }

    .success-name {
      color: var(--ink);
      font-weight: 700;
    }

    .notes-card {
      max-width: 620px;
      margin: 0 auto;
      padding: 22px;
      border: 1px solid rgba(39, 68, 125, 0.08);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.72);
      text-align: left;
    }

    .board-screen {
      width: 100%;
      max-width: none;
      height: 100%;
      min-height: calc(100vh - 64px);
      padding: 0;
      overflow: hidden;
    }

    .board-screen.is-active {
      display: block;
    }

    .board-app {
      width: 100%;
      height: 100%;
      min-height: calc(100vh - 64px);
      display: flex;
      flex-direction: column;
      border-radius: clamp(22px, 3vw, 28px);
      overflow: hidden;
      background: linear-gradient(180deg, #f7f9ff 0%, #f2f5fb 100%);
      border: 1px solid rgba(39, 68, 125, 0.08);
      box-shadow: 0 18px 44px rgba(23, 42, 82, 0.08);
    }

    .board-header {
      display: grid;
      grid-template-columns: 64px minmax(280px, 1fr) 64px;
      align-items: center;
      gap: clamp(14px, 2vw, 24px);
      padding: clamp(16px, 2vw, 20px) clamp(18px, 2.6vw, 30px);
      background: #ffffff;
      border-bottom: 1px solid rgba(39, 68, 125, 0.08);
    }

    .board-brand {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      outline: none;
      border-radius: 14px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .board-logo-icon {
      width: 46px;
      height: 46px;
      display: block;
    }

    .board-brand:hover {
      transform: translateY(-1px);
      opacity: 0.92;
    }

    .board-brand:focus-visible {
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.14);
    }

    .board-date-wrap {
      display: flex;
      justify-content: center;
    }

    .board-date-navigation {
      width: min(100%, 460px);
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      align-items: center;
      gap: 8px;
    }

    .board-date-nav-button {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      padding: 0;
      background: #ffffff;
      color: var(--ink);
      font: inherit;
      font-size: 1.55rem;
      line-height: 1;
      cursor: pointer;
      box-shadow: none;
      transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
    }

    .board-date-nav-button:hover:not(:disabled) {
      border-color: rgba(77, 87, 255, 0.24);
      background: rgba(77, 87, 255, 0.05);
      color: var(--primary);
      transform: translateY(-1px);
    }

    .board-date-nav-button:focus-visible {
      outline: none;
      border-color: rgba(77, 87, 255, 0.32);
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.08);
    }

    .board-date-nav-button:disabled {
      cursor: wait;
      opacity: 0.46;
    }

    .board-date-navigation .board-date-input {
      width: 100%;
      min-width: 0;
    }

    .board-date-input {
      width: min(100%, 760px);
      border: 1px solid rgba(39, 68, 125, 0.10);
      border-radius: 16px;
      padding: 15px 18px;
      background: #f8faff;
      color: var(--ink);
      font-size: 1rem;
      outline: none;
    }

    .board-date-input:focus {
      border-color: rgba(77, 87, 255, 0.34);
      box-shadow: 0 0 0 5px rgba(77, 87, 255, 0.08);
    }

    .board-avatar {
      position: relative;
      justify-self: end;
    }

    .board-avatar-button {
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bottom) 100%);
      color: #ffffff;
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(60, 53, 230, 0.16);
    }

    .board-avatar-menu {
      position: absolute;
      z-index: 60;
      top: calc(100% + 12px);
      right: 0;
      min-width: 230px;
      padding: 10px;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 18px 32px rgba(23, 42, 82, 0.12);
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .board-avatar-menu.is-open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .board-menu-button {
      width: 100%;
      border: 0;
      border-radius: 14px;
      padding: 12px 14px;
      background: #f5f8ff;
      color: var(--ink);
      font-size: 0.95rem;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .board-profile-meta {
      display: grid;
      gap: 3px;
      padding: 8px 10px 12px;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
      margin-bottom: 8px;
    }

    .board-profile-meta strong {
      color: var(--ink);
      font-size: 0.92rem;
    }

    .board-profile-meta span {
      color: var(--muted);
      font-size: 0.78rem;
    }

    .board-menu-button + .board-menu-button {
      margin-top: 6px;
    }

    .board-menu-button.is-team:hover,
    .board-menu-button.is-privacy:hover,
    .board-menu-button.is-security:hover {
      background: #eef1ff;
      color: var(--accent-bottom);
    }

    .board-menu-button:hover {
      background: #fff0f0;
      color: #c83434;
    }

    .board-body {
      flex: 1;
      padding: clamp(24px, 3vw, 38px) clamp(18px, 3vw, 36px) clamp(24px, 3vw, 42px);
      overflow-y: auto;
    }

    body.is-read-only .board-add-button,
    body.is-read-only #open-precheckin-register,
    body.is-read-only .note-actions,
    body.is-read-only .precheckin-item-actions {
      display: none !important;
    }

    .board-panel {
      max-width: 1180px;
      margin: 0 auto;
      padding: clamp(22px, 3vw, 30px) clamp(18px, 2.6vw, 32px);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(248, 250, 255, 0.76) 100%);
      box-shadow: var(--shadow-soft);
      text-align: left;
    }

    .board-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }

    .board-panel-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .board-panel-copy {
      min-width: 0;
    }

    .board-panel-title {
      margin: 0 0 8px;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.55rem, 2.5vw, 1.9rem);
      line-height: 1.1;
    }

    .board-panel-text {
      margin: 0;
      color: var(--muted);
      font-size: 0.98rem;
      line-height: 1.6;
    }

    .board-search-row {
      margin-top: 18px;
    }

    .ops-search {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      width: min(100%, 680px);
      min-height: 46px;
      border: 1px solid rgba(120, 140, 180, 0.15);
      border-radius: 8px;
      padding: 6px 7px 6px 12px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .ops-search input {
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: 0.86rem;
      font-weight: 700;
    }

    .ops-search input::placeholder {
      color: rgba(80, 101, 143, 0.66);
      font-weight: 650;
    }

    .ops-search-clear {
      width: 32px;
      height: 32px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 8px;
      background: #ffffff;
      color: #607397;
      font-size: 1.05rem;
      line-height: 1;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    }

    .ops-search-clear.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .ops-search-clear:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.22);
    }

    .board-add-button {
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      border: 1px solid rgba(77, 87, 255, 0.14);
      border-radius: var(--radius-sm);
      background: linear-gradient(180deg, rgba(77, 87, 255, 0.1) 0%, rgba(60, 53, 230, 0.16) 100%);
      color: var(--ink);
      font-size: 1.8rem;
      line-height: 1;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-inset);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .board-add-button:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.24);
      box-shadow:
        0 12px 22px rgba(60, 53, 230, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .board-archive-button {
      width: 48px;
      height: 48px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--surface-raised);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .board-archive-button:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.22);
      box-shadow: 0 12px 24px rgba(22, 40, 77, 0.08);
    }

    .board-archive-button svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .board-filter-button {
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      padding: 0 14px 0 12px;
      height: 48px;
      background: var(--surface-raised);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 0.92rem;
      font-weight: 700;
      white-space: nowrap;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .board-precheckin-count {
      min-width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 0 6px;
      background: var(--accent-bottom);
      color: #ffffff;
      font-size: 0.7rem;
      font-weight: 850;
    }

    .board-filter-button:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.22);
      box-shadow: 0 12px 24px rgba(22, 40, 77, 0.08);
    }

    .board-filter-button.is-active {
      border-color: rgba(77, 87, 255, 0.24);
      background: linear-gradient(180deg, rgba(77, 87, 255, 0.08) 0%, rgba(60, 53, 230, 0.12) 100%);
      box-shadow: 0 12px 24px rgba(60, 53, 230, 0.08);
    }

    .board-filter-button svg {
      width: 18px;
      height: 18px;
      display: block;
      flex: 0 0 auto;
    }

    .board-filter-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: 999px;
      background: rgba(77, 87, 255, 0.1);
      color: #3147a3;
      font-size: 0.74rem;
      font-weight: 800;
    }

    .board-precheckin-wrap {
      position: relative;
      display: inline-flex;
    }

    .board-precheckin-button {
      position: relative;
      border: 1px solid rgba(77, 87, 255, 0.14);
      border-radius: var(--radius-sm);
      padding: 0 14px 0 12px;
      height: 48px;
      background: linear-gradient(180deg, rgba(77, 87, 255, 0.08) 0%, rgba(60, 53, 230, 0.12) 100%);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 0.92rem;
      font-weight: 800;
      white-space: nowrap;
      box-shadow: var(--shadow-inset);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .board-precheckin-button:hover,
    .board-precheckin-button.is-open {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.26);
      box-shadow:
        0 12px 24px rgba(60, 53, 230, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .board-precheckin-button svg {
      width: 18px;
      height: 18px;
      display: block;
      flex: 0 0 auto;
    }

    .board-precheckin-count {
      position: absolute;
      top: -8px;
      right: -8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 24px;
      padding: 0 7px;
      border-radius: 999px;
      background: linear-gradient(135deg, #4169ff 0%, #4b35f5 100%);
      color: #ffffff;
      border: 2px solid #ffffff;
      box-shadow: 0 10px 20px rgba(65, 105, 255, 0.2);
      font-size: 0.74rem;
      font-weight: 900;
      line-height: 1;
    }

    .precheckin-menu {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      z-index: 15;
      width: 216px;
      padding: 8px;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 22px 44px rgba(23, 42, 82, 0.14);
      opacity: 0;
      transform: translateY(-6px) scale(0.98);
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .precheckin-menu.is-open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .precheckin-menu-button {
      width: 100%;
      border: 1px solid transparent;
      border-radius: 16px;
      padding: 11px 12px;
      background: transparent;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .precheckin-menu-button:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.13);
      background: rgba(77, 87, 255, 0.07);
    }

    .precheckin-menu-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #4169ff;
      background: rgba(65, 105, 255, 0.1);
      border: 1px solid rgba(65, 105, 255, 0.13);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
    }

    .precheckin-menu-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .precheckin-menu-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .precheckin-menu-copy strong {
      color: var(--ink);
      font-size: 0.92rem;
      line-height: 1.25;
    }

    .precheckin-menu-copy span {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.35;
      font-weight: 650;
    }

    .board-return-button {
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      padding: 0 18px;
      height: 48px;
      background: var(--surface-raised);
      color: var(--ink);
      font-size: 0.96rem;
      font-weight: 700;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .board-return-button.is-visible {
      display: inline-flex;
    }

    .notes-list {
      display: grid;
      gap: 18px;
      margin-top: 26px;
    }

    .notes-category-group {
      display: grid;
      gap: 14px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 255, 0.9) 100%);
      box-shadow: var(--shadow-soft);
    }

    .notes-category-group[hidden] {
      display: none;
    }

    .notes-category-title {
      margin: 0;
      color: var(--ink);
      font-size: 0.86rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }

    .notes-category-group.is-general-instructions {
      gap: 16px;
      padding: 22px;
      border-radius: 28px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      background:
        radial-gradient(circle at 88% 0%, rgba(65, 105, 255, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 251, 255, 0.9) 100%);
      box-shadow:
        0 24px 70px rgba(15, 35, 75, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .notes-category-group.is-general-instructions .notes-category-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      padding-bottom: 14px;
      border-bottom-color: rgba(120, 140, 180, 0.14);
    }

    .notes-category-title-main {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: var(--ink);
      font-size: 0.88rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .notes-category-title-icon,
    .note-general-card-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #4169ff;
      background: rgba(65, 105, 255, 0.1);
      border: 1px solid rgba(65, 105, 255, 0.13);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .notes-category-title-icon {
      width: 36px;
      height: 36px;
      border-radius: 13px;
    }

    .notes-category-title-icon.is-sensitive {
      color: #c84444;
      background: rgba(200, 68, 68, 0.1);
      border-color: rgba(200, 68, 68, 0.16);
    }

    .note-instruction-svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .note-general-card-icon .note-instruction-svg {
      width: 24px;
      height: 24px;
    }

    .notes-category-subtitle {
      color: rgba(80, 101, 143, 0.78);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.35;
      text-transform: none;
    }

    .notes-category-group.is-sensitive-situations {
      gap: 18px;
      padding: 28px;
      border-radius: 28px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      background:
        radial-gradient(circle at 92% 0%, rgba(200, 68, 68, 0.06), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 251, 255, 0.9) 100%);
      box-shadow:
        0 24px 70px rgba(15, 35, 75, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .notes-category-group.is-sensitive-situations .notes-category-title {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 14px;
      border-bottom-color: rgba(120, 140, 180, 0.14);
    }

    .note-item {
      padding: 20px 22px;
      border-radius: var(--radius-md);
      background: var(--surface-raised);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-inset);
      color: var(--ink);
      line-height: 1.7;
      white-space: pre-wrap;
    }

    .note-item.is-general-instruction {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: stretch;
      position: relative;
      overflow: hidden;
      padding: 20px;
      border-radius: 24px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      background:
        radial-gradient(circle at 96% 8%, rgba(65, 105, 255, 0.07), transparent 28%),
        rgba(255, 255, 255, 0.84);
      box-shadow:
        0 14px 38px rgba(15, 35, 75, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      line-height: 1.55;
      white-space: normal;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }

    .note-item.is-general-instruction:hover {
      transform: translateY(-1px);
      border-color: rgba(65, 105, 255, 0.2);
      box-shadow:
        0 18px 48px rgba(15, 35, 75, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .note-item.is-general-instruction.is-daily-memo:not(.is-done) {
      border-color: rgba(200, 68, 68, 0.24);
      background:
        radial-gradient(circle at 96% 8%, rgba(200, 68, 68, 0.14), transparent 30%),
        linear-gradient(135deg, rgba(255, 246, 246, 0.97), rgba(255, 250, 250, 0.92));
      box-shadow:
        0 18px 48px rgba(200, 68, 68, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .note-item.is-general-instruction.is-daily-memo:not(.is-done):hover {
      border-color: rgba(200, 68, 68, 0.32);
      box-shadow:
        0 22px 56px rgba(200, 68, 68, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .note-item.is-general-instruction.is-daily-memo:not(.is-done) .note-general-card-icon {
      color: #c84444;
      background: rgba(200, 68, 68, 0.1);
      border-color: rgba(200, 68, 68, 0.16);
    }

    .note-item.is-done {
      background: linear-gradient(180deg, rgba(79, 183, 126, 0.12) 0%, rgba(79, 183, 126, 0.18) 100%);
      border-color: rgba(79, 183, 126, 0.26);
    }

    .note-item.is-general-instruction.is-done {
      background:
        radial-gradient(circle at 96% 8%, rgba(36, 150, 91, 0.1), transparent 28%),
        linear-gradient(135deg, rgba(235, 250, 242, 0.95), rgba(248, 255, 251, 0.9));
      border-color: rgba(36, 150, 91, 0.22);
    }

    .note-item.is-general-instruction.is-done .note-general-card-icon {
      color: #24965b;
      background: rgba(36, 150, 91, 0.1);
      border-color: rgba(36, 150, 91, 0.16);
    }

    .note-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 10px;
    }

    .note-item.is-general-instruction .note-item-head {
      grid-column: 2;
      grid-row: 1;
      align-items: center;
      justify-content: flex-end;
      align-self: stretch;
      gap: 10px;
      margin: 0;
      padding-left: 18px;
      border-left: 1px solid rgba(120, 140, 180, 0.14);
    }

    .note-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
      position: relative;
    }

    .note-priority-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(209, 67, 67, 0.1);
      color: #c83434;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    .note-general-body {
      grid-column: 1;
      grid-row: 1;
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 16px;
      min-width: 0;
      align-items: flex-start;
    }

    .note-general-card-icon {
      width: 56px;
      height: 56px;
      border-radius: 18px;
    }

    .note-general-copy {
      display: grid;
      gap: 9px;
      min-width: 0;
    }

    .note-general-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: max-content;
      max-width: 100%;
      color: #38517f;
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .note-general-badge::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #4169ff;
      box-shadow: 0 0 0 4px rgba(65, 105, 255, 0.11);
    }

    .note-general-badge.is-daily-memo {
      color: #b83a3a;
    }

    .note-general-badge.is-daily-memo::before {
      background: #c84444;
      box-shadow: 0 0 0 4px rgba(200, 68, 68, 0.12);
    }

    .note-content {
      white-space: pre-wrap;
    }

    .note-item.is-general-instruction .note-content {
      color: var(--ink);
      font-size: 1.05rem;
      font-weight: 500;
      line-height: 1.58;
    }

    .note-content.is-editable {
      cursor: text;
      border-radius: var(--radius-xs);
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .note-content.is-editable:hover {
      background: rgba(77, 87, 255, 0.06);
      box-shadow: 0 0 0 8px rgba(77, 87, 255, 0.06);
    }

    .note-item.is-general-instruction .note-content.is-editable:hover {
      background: rgba(65, 105, 255, 0.055);
      box-shadow: 0 0 0 8px rgba(65, 105, 255, 0.055);
    }

    .note-item.is-sensitive-situation {
      display: grid;
      gap: 18px;
      position: relative;
      overflow: hidden;
      padding: 24px;
      border-radius: 28px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      background:
        radial-gradient(circle at 96% 0%, rgba(200, 68, 68, 0.06), transparent 28%),
        rgba(255, 255, 255, 0.9);
      box-shadow:
        0 20px 56px rgba(15, 35, 75, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
      line-height: 1.55;
      white-space: normal;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .note-item.is-sensitive-situation:hover {
      transform: translateY(-1px);
      border-color: rgba(200, 68, 68, 0.18);
      box-shadow:
        0 26px 68px rgba(15, 35, 75, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .note-item.is-sensitive-situation.is-done {
      background:
        radial-gradient(circle at 96% 0%, rgba(36, 150, 91, 0.08), transparent 28%),
        linear-gradient(135deg, rgba(252, 255, 253, 0.96), rgba(245, 253, 249, 0.9));
      border-color: rgba(36, 150, 91, 0.2);
    }

    .note-item.is-sensitive-situation .note-item-head {
      align-items: flex-start;
      gap: 18px;
      margin: 0;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(120, 140, 180, 0.14);
    }

    .note-item.is-sensitive-situation .note-meta {
      display: grid;
      gap: 12px;
      flex: 1 1 420px;
      min-width: min(100%, 280px);
    }

    .note-sensitive-heading {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      color: var(--ink);
      font-size: 0.9rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1.25;
      text-transform: uppercase;
    }

    .note-sensitive-heading-icon,
    .note-sensitive-info-icon,
    .note-sensitive-solution-icon,
    .note-sensitive-description-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .note-sensitive-heading-icon {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      color: #c84444;
      background: rgba(200, 68, 68, 0.1);
      border: 1px solid rgba(200, 68, 68, 0.16);
    }

    .note-sensitive-svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .note-sensitive-heading-icon .note-sensitive-svg {
      width: 25px;
      height: 25px;
    }

    .note-sensitive-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      align-items: center;
    }

    .note-item.is-sensitive-situation .note-priority-badge {
      gap: 8px;
      justify-content: flex-start;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(200, 68, 68, 0.1);
      border: 1px solid rgba(200, 68, 68, 0.12);
      color: #b83a3a;
      font-size: 0.84rem;
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
    }

    .note-item.is-sensitive-situation .note-priority-badge::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 0 4px rgba(200, 68, 68, 0.1);
    }

    .note-sensitive-info-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
      gap: 12px;
    }

    .note-sensitive-info-card.note-context-chip {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-width: 0;
      margin: 0;
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(65, 105, 255, 0.04);
      border: 1px solid rgba(120, 140, 180, 0.16);
      box-shadow:
        0 10px 28px rgba(15, 35, 75, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
      white-space: normal;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }

    .note-sensitive-info-card.note-context-chip:hover {
      transform: translateY(-1px);
      box-shadow:
        0 14px 34px rgba(15, 35, 75, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .note-sensitive-info-card.note-context-chip.is-editable {
      cursor: text;
    }

    .note-sensitive-info-card.note-context-chip.is-editable:hover {
      background: rgba(65, 105, 255, 0.065);
      border-color: rgba(65, 105, 255, 0.16);
    }

    .note-sensitive-info-icon {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      color: #4169ff;
      background: rgba(65, 105, 255, 0.09);
      border: 1px solid rgba(65, 105, 255, 0.12);
    }

    .note-sensitive-info-icon .note-sensitive-svg {
      width: 19px;
      height: 19px;
    }

    .note-sensitive-info-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .note-sensitive-info-label {
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 750;
      line-height: 1.25;
    }

    .note-sensitive-info-value {
      color: var(--ink);
      font-size: 1.02rem;
      font-weight: 900;
      line-height: 1.3;
      word-break: break-word;
    }

    .note-sensitive-solutions {
      display: grid;
      gap: 14px;
      padding: 22px;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(235, 250, 242, 0.82), rgba(248, 255, 251, 0.72));
      border: 1px solid rgba(36, 150, 91, 0.18);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .note-sensitive-solutions-head {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #176c43;
      font-size: 0.85rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .note-sensitive-solutions-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 13px;
      color: #24965b;
      background: rgba(36, 150, 91, 0.1);
      border: 1px solid rgba(36, 150, 91, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .note-sensitive-solutions-head .note-sensitive-svg {
      width: 20px;
      height: 20px;
    }

    .note-sensitive-solutions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .note-sensitive-solution-card {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.58);
      border: 1px solid rgba(36, 150, 91, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .note-sensitive-solution-card:hover {
      transform: translateY(-1px);
      border-color: rgba(36, 150, 91, 0.22);
      box-shadow: 0 12px 30px rgba(36, 150, 91, 0.075);
    }

    .note-sensitive-solution-card.is-unresolved {
      background: rgba(255, 249, 238, 0.66);
      border-color: rgba(196, 126, 36, 0.18);
    }

    .note-sensitive-solution-icon {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      color: #24965b;
      background: rgba(36, 150, 91, 0.1);
      border: 1px solid rgba(36, 150, 91, 0.14);
    }

    .note-sensitive-solution-card.is-unresolved .note-sensitive-solution-icon {
      color: #b87421;
      background: rgba(196, 126, 36, 0.1);
      border-color: rgba(196, 126, 36, 0.16);
    }

    .note-sensitive-solution-icon .note-sensitive-svg {
      width: 21px;
      height: 21px;
    }

    .note-sensitive-solution-text {
      color: #176c43;
      font-size: 1rem;
      font-weight: 850;
      line-height: 1.35;
    }

    .note-sensitive-solution-card.is-unresolved .note-sensitive-solution-text {
      color: #8c5516;
    }

    .note-sensitive-description {
      display: grid;
      gap: 10px;
      padding: 18px 20px;
      border-radius: 20px;
      background: rgba(65, 105, 255, 0.035);
      border: 1px solid rgba(120, 140, 180, 0.16);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .note-sensitive-description-head {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #4169ff;
      font-size: 0.8rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .note-sensitive-description-icon {
      width: 32px;
      height: 32px;
      border-radius: 12px;
      color: #4169ff;
      background: rgba(65, 105, 255, 0.08);
      border: 1px solid rgba(65, 105, 255, 0.12);
    }

    .note-sensitive-description-icon .note-sensitive-svg {
      width: 16px;
      height: 16px;
    }

    .note-item.is-sensitive-situation .note-content {
      color: var(--ink);
      font-size: 1.02rem;
      font-weight: 500;
      line-height: 1.55;
    }

    .note-item.is-sensitive-situation.is-done .note-content {
      color: var(--ink);
    }

    .note-item.is-sensitive-situation .note-content.is-editable:hover {
      background: rgba(65, 105, 255, 0.055);
      box-shadow: 0 0 0 8px rgba(65, 105, 255, 0.055);
    }

    .note-editor {
      display: grid;
      gap: 12px;
      margin-top: 2px;
    }

    .note-editor-field {
      display: grid;
      gap: 7px;
    }

    .note-editor-label {
      color: #38517f;
      font-size: 0.82rem;
      font-weight: 800;
    }

    .note-editor-line {
      width: 100%;
      border: 1px solid rgba(77, 87, 255, 0.2);
      border-radius: var(--radius-xs);
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      padding: 12px 14px;
      font: inherit;
      line-height: 1.4;
      outline: none;
      box-shadow: var(--shadow-inset);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .note-editor-input {
      width: 100%;
      min-height: 132px;
      resize: vertical;
      border: 1px solid rgba(77, 87, 255, 0.2);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      padding: 16px 18px;
      font: inherit;
      line-height: 1.65;
      outline: none;
      box-shadow: var(--shadow-inset);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .note-editor-line:focus,
    .note-editor-input:focus {
      border-color: rgba(77, 87, 255, 0.48);
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.1), var(--shadow-inset);
    }

    .note-editor-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .note-editor-cancel,
    .note-editor-save {
      border: 0;
      border-radius: var(--radius-xs);
      padding: 10px 15px;
      font-size: 0.9rem;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
    }

    .note-editor-cancel {
      background: rgba(56, 81, 127, 0.08);
      color: #38517f;
    }

    .note-editor-save {
      background: linear-gradient(135deg, #4169ff, #4b35f5);
      color: #fff;
      box-shadow: 0 12px 24px rgba(68, 74, 255, 0.2);
    }

    .note-editor-cancel:hover,
    .note-editor-save:hover {
      transform: translateY(-1px);
    }

    .note-editor-save:disabled {
      cursor: wait;
      opacity: 0.68;
      transform: none;
    }

    .note-context {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 14px;
    }

    .note-context-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: var(--radius-xs);
      background: var(--chip-surface);
      color: #38517f;
      font-size: 0.88rem;
      font-weight: 700;
      line-height: 1.3;
    }

    .note-context-chip strong {
      color: var(--ink);
      font-weight: 800;
    }

    .note-context-chip.is-editable {
      cursor: text;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .note-context-chip.is-editable:hover {
      background: rgba(77, 87, 255, 0.08);
      box-shadow: 0 0 0 5px rgba(77, 87, 255, 0.06);
    }

    .note-context-chip[data-context="room"],
    .note-room-inline-editor {
      width: max-content;
      min-width: 118px;
      max-width: 100%;
      min-height: 41px;
      flex: 0 1 auto;
      white-space: nowrap;
    }

    .note-room-inline-editor {
      display: inline-grid;
      grid-template-columns: auto minmax(2ch, auto);
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 10px 14px;
      border-radius: var(--radius-xs);
      background: rgba(77, 87, 255, 0.08);
      color: #38517f;
      font-size: 0.88rem;
      font-weight: 700;
      line-height: 1.3;
      box-shadow: none;
    }

    .note-room-inline-input {
      width: calc(var(--room-input-ch, 4) * 1ch);
      min-width: 2ch;
      max-width: min(22ch, 42vw);
      border: 0;
      border-bottom: 1px solid rgba(77, 87, 255, 0.36);
      border-radius: 0;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-weight: 800;
      line-height: 1.2;
      padding: 1px 2px;
      outline: none;
    }

    .note-room-inline-input:focus {
      border-bottom-color: #4169ff;
    }

    .note-room-inline-input:disabled {
      opacity: 0.58;
    }

    .note-sensitive-info-card.note-context-chip[data-context="room"] {
      width: auto;
      min-width: 0;
      min-height: auto;
      max-width: 100%;
      box-sizing: border-box;
      flex: initial;
      white-space: normal;
    }

    .note-item.is-sensitive-situation .note-room-inline-editor {
      grid-template-columns: minmax(0, 1fr);
      align-content: center;
      gap: 6px;
      width: 100%;
      min-width: 0;
      min-height: 74px;
      box-sizing: border-box;
      overflow: hidden;
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(65, 105, 255, 0.065);
      border: 1px solid rgba(65, 105, 255, 0.16);
      box-shadow:
        0 10px 28px rgba(15, 35, 75, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .note-item.is-sensitive-situation .note-room-inline-editor span {
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 750;
      line-height: 1.2;
    }

    .note-item.is-sensitive-situation .note-room-inline-input {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      font-size: 1rem;
    }

    .note-item.is-taxi-transfer {
      position: relative;
      overflow: hidden;
      padding: 22px;
      border-radius: 28px;
      border: 1px solid rgba(120, 140, 180, 0.18);
      background:
        radial-gradient(circle at 88% 10%, rgba(65, 105, 255, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.92) 100%);
      box-shadow:
        0 24px 70px rgba(15, 35, 75, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      white-space: normal;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .note-item.is-taxi-transfer:hover {
      transform: translateY(-1px);
      border-color: rgba(65, 105, 255, 0.2);
      box-shadow:
        0 30px 80px rgba(15, 35, 75, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .note-item.is-taxi-transfer.is-done {
      background:
        radial-gradient(circle at 88% 10%, rgba(79, 183, 126, 0.1), transparent 32%),
        linear-gradient(180deg, rgba(252, 255, 253, 0.98) 0%, rgba(241, 251, 246, 0.94) 100%);
      border-color: rgba(79, 183, 126, 0.24);
    }

    .note-item.is-taxi-transfer .note-item-head {
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(120, 140, 180, 0.14);
    }

    .note-taxi-heading {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-size: 0.86rem;
      font-weight: 900;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .note-taxi-heading-icon,
    .note-taxi-stop-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #4169ff;
      background: rgba(65, 105, 255, 0.1);
      border: 1px solid rgba(65, 105, 255, 0.13);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .note-taxi-heading-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
    }

    .note-taxi-svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .note-taxi-card {
      display: grid;
      gap: 14px;
      margin: 0;
      white-space: normal;
    }

    .note-taxi-meta {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .note-taxi-meta-item {
      display: grid;
      gap: 10px;
      padding: 16px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid rgba(120, 140, 180, 0.16);
      box-shadow:
        0 16px 34px rgba(15, 35, 75, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      text-align: left;
    }

    .note-taxi-meta-label {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.11em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .note-taxi-client-name {
      color: var(--ink);
      font-size: 1.08rem;
      font-weight: 900;
      line-height: 1.28;
      word-break: break-word;
    }

    .note-taxi-client-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .note-taxi-chip,
    .note-taxi-route-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: max-content;
      max-width: 100%;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(65, 105, 255, 0.08);
      border: 1px solid rgba(65, 105, 255, 0.12);
      color: #38517f;
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1.25;
    }

    .note-taxi-chip strong,
    .note-taxi-route-pill strong {
      color: var(--ink);
      font-weight: 900;
    }

    .note-taxi-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #4169ff;
    }

    .note-taxi-icon .note-taxi-svg {
      width: 16px;
      height: 16px;
    }

    .note-taxi-meta-line {
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.35;
    }

    .note-taxi-meta-line strong {
      color: var(--ink);
      font-weight: 800;
    }

    .note-taxi-route {
      display: grid;
      gap: 16px;
      position: relative;
      overflow: hidden;
      padding: 18px;
      border-radius: 24px;
      background:
        radial-gradient(circle at 50% 0%, rgba(65, 105, 255, 0.1), transparent 38%),
        linear-gradient(180deg, rgba(246, 249, 255, 0.98) 0%, rgba(238, 244, 255, 0.88) 100%);
      border: 1px solid rgba(120, 140, 180, 0.16);
      box-shadow:
        0 18px 44px rgba(15, 35, 75, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }

    .note-taxi-route-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      position: relative;
      z-index: 2;
    }

    .note-taxi-route-pill {
      background: rgba(255, 255, 255, 0.72);
      border-color: rgba(120, 140, 180, 0.16);
      color: var(--muted);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
    }

    .note-taxi-route-pill.is-fare {
      margin-left: auto;
      background: rgba(65, 105, 255, 0.08);
      color: #38517f;
    }

    .note-taxi-route-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      position: relative;
    }

    .note-taxi-route-body::before {
      content: "";
      position: absolute;
      left: calc(25% + 28px);
      right: calc(25% + 28px);
      top: 50%;
      border-top: 1px dashed rgba(65, 105, 255, 0.22);
      transform: translateY(-50%);
      z-index: 0;
      pointer-events: none;
    }

    .note-taxi-stop {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 8px;
      min-width: 0;
      padding: 16px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(120, 140, 180, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
      text-align: left;
    }

    .note-taxi-stop-head {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 0.74rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .note-taxi-stop-icon {
      width: 30px;
      height: 30px;
      border-radius: 11px;
    }

    .note-taxi-stop-icon .note-taxi-svg {
      width: 15px;
      height: 15px;
    }

    .note-taxi-stop-value {
      color: var(--ink);
      font-size: 1.02rem;
      font-weight: 900;
      line-height: 1.35;
      word-break: break-word;
    }

    .note-taxi-stop-detail {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1.35;
    }

    .note-taxi-stop-detail strong {
      color: var(--ink);
      font-weight: 900;
    }

    .note-taxi-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      justify-self: center;
      align-self: center;
      position: relative;
      z-index: 2;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(65, 105, 255, 0.14), rgba(75, 53, 245, 0.1));
      border: 1px solid rgba(65, 105, 255, 0.16);
      color: #3247a7;
      box-shadow:
        0 12px 26px rgba(65, 105, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
      font-size: 1.1rem;
      font-weight: 900;
    }

    .note-taxi-inline-editable {
      display: inline-flex;
      align-items: baseline;
      max-width: 100%;
      padding: 0 3px;
      border-radius: 8px;
      cursor: text;
      white-space: nowrap;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .note-taxi-inline-editable:hover {
      background: rgba(77, 87, 255, 0.08);
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.06);
    }

    .note-taxi-inline-editor.note-editor {
      display: inline-grid;
      grid-template-columns: minmax(2ch, auto);
      width: max-content;
      max-width: 100%;
      min-height: auto;
      margin: 0;
      padding: 0 3px;
      border-radius: 8px;
      background: rgba(77, 87, 255, 0.08);
      box-shadow: none;
      vertical-align: baseline;
    }

    .note-taxi-inline-editor .note-room-inline-input {
      max-width: min(18ch, 32vw);
    }

    .note-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .note-done {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
    }

    .note-done input {
      width: 18px;
      height: 18px;
      accent-color: #4fb77e;
      cursor: pointer;
      margin: 0;
    }

    .note-item.is-done .note-content {
      color: #245d3a;
    }

    .note-item.is-general-instruction.is-done .note-content {
      color: #176c43;
    }

    .note-item.is-done .note-done {
      color: #2d7a4a;
    }

    .note-item.is-general-instruction .note-actions {
      gap: 10px;
      flex-wrap: nowrap;
    }

    .note-item.is-general-instruction .note-done {
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(120, 140, 180, 0.16);
      color: #38517f;
      font-size: 0.86rem;
      font-weight: 850;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .note-item.is-general-instruction .note-done:hover {
      transform: translateY(-1px);
      border-color: rgba(65, 105, 255, 0.22);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 10px 22px rgba(15, 35, 75, 0.06);
    }

    .note-item.is-general-instruction .note-done input {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 1.5px solid rgba(80, 101, 143, 0.32);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .note-item.is-general-instruction .note-done input:checked {
      border-color: rgba(36, 150, 91, 0.95);
      background:
        linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.96) 42% 58%, transparent 58%),
        linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.96) 48% 62%, transparent 62%),
        #24965b;
      box-shadow: 0 0 0 4px rgba(36, 150, 91, 0.12);
    }

    .note-item.is-general-instruction.is-done .note-done {
      color: #176c43;
      border-color: rgba(36, 150, 91, 0.22);
      background: rgba(255, 255, 255, 0.88);
    }

    .note-item.is-sensitive-situation .note-actions {
      gap: 10px;
      flex-wrap: nowrap;
      padding-left: 18px;
      border-left: 1px solid rgba(120, 140, 180, 0.14);
    }

    .note-item.is-sensitive-situation .note-done {
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(120, 140, 180, 0.16);
      color: #38517f;
      font-size: 0.86rem;
      font-weight: 850;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .note-item.is-sensitive-situation .note-done:hover {
      transform: translateY(-1px);
      border-color: rgba(36, 150, 91, 0.22);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 10px 22px rgba(15, 35, 75, 0.06);
    }

    .note-item.is-sensitive-situation .note-done input {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 1.5px solid rgba(80, 101, 143, 0.32);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .note-item.is-sensitive-situation .note-done input:checked {
      border-color: rgba(36, 150, 91, 0.95);
      background:
        linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.96) 42% 58%, transparent 58%),
        linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.96) 48% 62%, transparent 62%),
        #24965b;
      box-shadow: 0 0 0 4px rgba(36, 150, 91, 0.12);
    }

    .note-item.is-sensitive-situation.is-done .note-done {
      color: #176c43;
      border-color: rgba(36, 150, 91, 0.22);
      background: rgba(255, 255, 255, 0.88);
    }

    .note-item.is-archiving {
      opacity: 0;
      transform: translateX(28px) scale(0.98);
      max-height: 0;
      margin: 0;
      padding-top: 0;
      padding-bottom: 0;
      overflow: hidden;
      transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        max-height 0.4s ease,
        margin 0.4s ease,
        padding 0.4s ease;
    }

    .note-archive {
      border: 0;
      padding: 0;
      background: transparent;
      color: #6e7fa4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .note-archive:hover {
      color: #3048a8;
      transform: translateY(-1px);
    }

    .note-archive svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .note-item.is-general-instruction .note-archive {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.72);
      color: #6e7fa4;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .note-item.is-general-instruction .note-archive:hover {
      color: #c84444;
      background: rgba(200, 68, 68, 0.08);
      border-color: rgba(200, 68, 68, 0.18);
      box-shadow: 0 10px 22px rgba(200, 68, 68, 0.08);
    }

    .note-item.is-sensitive-situation .note-archive {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.72);
      color: #6e7fa4;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .note-item.is-sensitive-situation .note-archive:hover {
      color: #c84444;
      background: rgba(200, 68, 68, 0.08);
      border-color: rgba(200, 68, 68, 0.18);
      box-shadow: 0 10px 22px rgba(200, 68, 68, 0.08);
    }

    .note-menu {
      position: relative;
    }

    .note-menu-trigger {
      border: 0;
      padding: 0;
      background: transparent;
      color: #6e7fa4;
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      line-height: 1;
      cursor: pointer;
    }

    .note-menu-popover {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 150px;
      padding: 8px;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 30px rgba(22, 40, 77, 0.12);
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
      z-index: 5;
    }

    .note-menu.is-open .note-menu-popover {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .note-menu-action {
      width: 100%;
      border: 0;
      border-radius: 12px;
      padding: 10px 12px;
      background: var(--chip-surface);
      color: var(--ink);
      font-size: 0.92rem;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }

    .note-status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    .note-status-badge::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 0 4px currentColor;
      opacity: 0.22;
    }

    .note-status-badge.is-confirmed {
      background: rgba(55, 111, 227, 0.1);
      color: #2f5fb7;
    }

    .note-status-badge.is-cancelled {
      background: rgba(200, 52, 52, 0.12);
      color: #c83434;
    }

    .note-item.is-taxi-transfer .note-status-badge {
      padding: 8px 13px;
      background: rgba(65, 105, 255, 0.09);
      border: 1px solid rgba(65, 105, 255, 0.12);
      color: #315fc5;
      font-weight: 850;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
    }

    .note-item.is-taxi-transfer .note-status-badge.is-cancelled {
      background: rgba(200, 68, 68, 0.1);
      border-color: rgba(200, 68, 68, 0.16);
      color: #c84444;
    }

    .note-cancel-transfer {
      border: 1px solid rgba(200, 52, 52, 0.18);
      border-radius: 999px;
      padding: 8px 14px;
      background: rgba(255, 255, 255, 0.92);
      color: #b43a3a;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .note-cancel-transfer:hover {
      background: rgba(200, 52, 52, 0.08);
      border-color: rgba(200, 52, 52, 0.3);
      color: #a22d2d;
      transform: translateY(-1px);
    }

    .note-item.is-taxi-transfer .note-actions {
      gap: 10px;
      flex-wrap: wrap;
    }

    .note-item.is-taxi-transfer .note-done {
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(120, 140, 180, 0.16);
      color: #38517f;
      font-size: 0.86rem;
      font-weight: 850;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .note-item.is-taxi-transfer .note-done:hover {
      transform: translateY(-1px);
      border-color: rgba(65, 105, 255, 0.22);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 10px 22px rgba(15, 35, 75, 0.06);
    }

    .note-item.is-taxi-transfer .note-done input {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 1.5px solid rgba(80, 101, 143, 0.32);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .note-item.is-taxi-transfer .note-done input:checked {
      border-color: rgba(79, 183, 126, 0.95);
      background:
        linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.95) 42% 58%, transparent 58%),
        linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.95) 48% 62%, transparent 62%),
        #4fb77e;
      box-shadow: 0 0 0 4px rgba(79, 183, 126, 0.12);
    }

    .note-item.is-taxi-transfer .note-cancel-transfer {
      min-height: 38px;
      padding: 8px 14px;
      border-color: rgba(200, 68, 68, 0.2);
      background: rgba(200, 68, 68, 0.08);
      color: #b73b3b;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .note-item.is-taxi-transfer .note-cancel-transfer:hover {
      background: rgba(200, 68, 68, 0.12);
      border-color: rgba(200, 68, 68, 0.32);
      color: #9f2f2f;
      box-shadow: 0 10px 22px rgba(200, 68, 68, 0.09);
    }

    .note-item.is-taxi-transfer .note-archive {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.72);
      color: #6e7fa4;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .note-item.is-taxi-transfer .note-archive:hover {
      color: #3048a8;
      background: rgba(65, 105, 255, 0.08);
      border-color: rgba(65, 105, 255, 0.18);
      box-shadow: 0 10px 22px rgba(15, 35, 75, 0.06);
    }

    .notes-category-title-icon.is-group {
      color: #4169ff;
      background: rgba(65, 105, 255, 0.1);
      border-color: rgba(65, 105, 255, 0.14);
    }

    .notes-category-group.is-group-arrivals {
      gap: 18px;
      padding: 26px;
      border-radius: 28px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      background:
        radial-gradient(circle at 90% 0%, rgba(65, 105, 255, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 251, 255, 0.9) 100%);
      box-shadow:
        0 24px 70px rgba(15, 35, 75, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .notes-category-group.is-group-arrivals .notes-category-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      padding-bottom: 14px;
      border-bottom-color: rgba(120, 140, 180, 0.14);
    }

    .note-item.is-group-arrival {
      position: relative;
      overflow: hidden;
      display: grid;
      gap: 16px;
      padding: 22px;
      border-radius: 28px;
      border: 1px solid rgba(120, 140, 180, 0.18);
      background:
        radial-gradient(circle at 88% 8%, rgba(65, 105, 255, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.92) 100%);
      box-shadow:
        0 24px 70px rgba(15, 35, 75, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      white-space: normal;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .note-item.is-group-arrival:hover {
      transform: translateY(-1px);
      border-color: rgba(65, 105, 255, 0.2);
      box-shadow:
        0 30px 80px rgba(15, 35, 75, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .note-item.is-group-arrival.is-done {
      background:
        radial-gradient(circle at 88% 8%, rgba(79, 183, 126, 0.1), transparent 32%),
        linear-gradient(180deg, rgba(252, 255, 253, 0.98) 0%, rgba(241, 251, 246, 0.94) 100%);
      border-color: rgba(79, 183, 126, 0.24);
    }

    .note-item.is-group-arrival .note-item-head {
      align-items: center;
      margin: 0;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(120, 140, 180, 0.14);
    }

    .note-group-heading {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-size: 0.86rem;
      font-weight: 900;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .note-group-heading-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      color: #4169ff;
      background: rgba(65, 105, 255, 0.1);
      border: 1px solid rgba(65, 105, 255, 0.13);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .note-group-icon,
    .note-group-heading-icon,
    .note-group-section-icon,
    .note-group-detail-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .note-group-svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .note-group-heading-icon .note-group-svg {
      width: 18px;
      height: 18px;
    }

    .note-group-phase-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(65, 105, 255, 0.09);
      border: 1px solid rgba(65, 105, 255, 0.12);
      color: #315fc5;
      font-size: 0.82rem;
      font-weight: 850;
      line-height: 1.2;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
    }

    .note-group-phase-badge::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 0 4px currentColor;
      opacity: 0.18;
    }

    .note-group-phase-badge.is-checkout {
      background: rgba(247, 148, 44, 0.1);
      border-color: rgba(247, 148, 44, 0.16);
      color: #a96514;
    }

    .note-item.is-group-arrival .note-actions {
      gap: 10px;
      flex-wrap: wrap;
    }

    .note-item.is-group-arrival .note-done {
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(120, 140, 180, 0.16);
      color: #38517f;
      font-size: 0.86rem;
      font-weight: 850;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .note-item.is-group-arrival .note-done:hover {
      transform: translateY(-1px);
      border-color: rgba(65, 105, 255, 0.22);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 10px 22px rgba(15, 35, 75, 0.06);
    }

    .note-item.is-group-arrival .note-done input {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 1.5px solid rgba(80, 101, 143, 0.32);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .note-item.is-group-arrival .note-done input:checked {
      border-color: rgba(79, 183, 126, 0.95);
      background:
        linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.95) 42% 58%, transparent 58%),
        linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.95) 48% 62%, transparent 62%),
        #4fb77e;
      box-shadow: 0 0 0 4px rgba(79, 183, 126, 0.12);
    }

    .note-item.is-group-arrival .note-archive {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.72);
      color: #6e7fa4;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .note-item.is-group-arrival .note-archive:hover {
      color: #3048a8;
      background: rgba(65, 105, 255, 0.08);
      border-color: rgba(65, 105, 255, 0.18);
      box-shadow: 0 10px 22px rgba(15, 35, 75, 0.06);
    }

    .note-group-card {
      display: grid;
      gap: 14px;
      white-space: normal;
    }

    .note-group-summary {
      display: grid;
      gap: 12px;
      padding: 18px;
      border-radius: 24px;
      background:
        radial-gradient(circle at 96% 0%, rgba(65, 105, 255, 0.08), transparent 36%),
        rgba(255, 255, 255, 0.84);
      border: 1px solid rgba(120, 140, 180, 0.16);
      box-shadow:
        0 16px 34px rgba(15, 35, 75, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      text-align: left;
    }

    .note-group-identity {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .note-group-label {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.11em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .note-group-name {
      color: var(--ink);
      font-size: clamp(1.18rem, 2vw, 1.45rem);
      font-weight: 900;
      line-height: 1.22;
      word-break: break-word;
    }

    .note-group-chip-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .note-group-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 100%;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(65, 105, 255, 0.08);
      border: 1px solid rgba(65, 105, 255, 0.12);
      color: #38517f;
      font-size: 0.82rem;
      font-weight: 850;
      line-height: 1.25;
    }

    .note-group-chip.is-amber {
      background: rgba(247, 148, 44, 0.1);
      border-color: rgba(247, 148, 44, 0.16);
      color: #9a6115;
    }

    .note-group-chip.is-blue {
      background: rgba(65, 105, 255, 0.1);
      border-color: rgba(65, 105, 255, 0.16);
      color: #315fc5;
    }

    .note-group-section {
      display: grid;
      gap: 12px;
      padding: 18px;
      border-radius: 24px;
      background:
        radial-gradient(circle at 50% 0%, rgba(65, 105, 255, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(246, 249, 255, 0.98) 0%, rgba(238, 244, 255, 0.86) 100%);
      border: 1px solid rgba(120, 140, 180, 0.16);
      box-shadow:
        0 18px 44px rgba(15, 35, 75, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }

    .note-group-card.is-checkout .note-group-section {
      background:
        radial-gradient(circle at 50% 0%, rgba(247, 148, 44, 0.09), transparent 40%),
        linear-gradient(180deg, rgba(255, 250, 244, 0.98) 0%, rgba(255, 246, 232, 0.84) 100%);
    }

    .note-group-section-head {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-size: 0.82rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .note-group-section-icon {
      width: 34px;
      height: 34px;
      border-radius: 13px;
      color: #4169ff;
      background: rgba(65, 105, 255, 0.1);
      border: 1px solid rgba(65, 105, 255, 0.13);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .note-group-card.is-checkout .note-group-section-icon {
      color: #a96514;
      background: rgba(247, 148, 44, 0.11);
      border-color: rgba(247, 148, 44, 0.16);
    }

    .note-group-detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .note-group-detail-card {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 15px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.62);
      border: 1px solid rgba(120, 140, 180, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .note-group-detail-icon {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      color: #4169ff;
      background: rgba(65, 105, 255, 0.09);
      border: 1px solid rgba(65, 105, 255, 0.12);
    }

    .note-group-detail-icon .note-group-svg {
      width: 19px;
      height: 19px;
    }

    .note-group-detail-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .note-group-detail-label {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      line-height: 1.25;
    }

    .note-group-detail-value {
      color: var(--ink);
      font-size: 0.98rem;
      font-weight: 900;
      line-height: 1.32;
      word-break: break-word;
    }

    .note-group-note {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 12px;
      align-items: flex-start;
      padding: 16px;
      border-radius: 20px;
      background: rgba(65, 105, 255, 0.035);
      border: 1px solid rgba(120, 140, 180, 0.16);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .note-group-note p,
    .note-group-note .note-content {
      margin: 0;
      color: var(--ink);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.55;
      white-space: pre-wrap;
    }

    .note-group-note .note-content.is-editable {
      min-height: 28px;
      padding: 2px 0;
    }

    .note-group-note .note-content.is-empty {
      color: rgba(80, 101, 143, 0.72);
      font-weight: 750;
      font-style: italic;
    }

    .note-group-note .note-content.is-editable:hover {
      background: rgba(65, 105, 255, 0.055);
      box-shadow: 0 0 0 8px rgba(65, 105, 255, 0.055);
    }

    .cancel-modal {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .cancel-modal[hidden] {
      display: none;
    }

    .cancel-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(22, 40, 77, 0.26);
      backdrop-filter: blur(6px);
      opacity: 0;
      transition: opacity 0.24s ease;
    }

    .cancel-modal-panel {
      position: relative;
      width: min(100%, 560px);
      padding: 28px 24px 22px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 28px 58px rgba(22, 40, 77, 0.18);
      transform: translateY(18px) scale(0.98);
      opacity: 0;
      transition: transform 0.28s ease, opacity 0.28s ease;
    }

    .cancel-modal.is-open .cancel-modal-backdrop {
      opacity: 1;
    }

    .cancel-modal.is-open .cancel-modal-panel {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .cancel-modal-title {
      margin: 0 0 8px;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.6rem, 3vw, 2.1rem);
      line-height: 1.08;
      letter-spacing: -0.03em;
    }

    .cancel-modal-text {
      margin: 0 0 20px;
      color: var(--muted);
      font-size: 0.98rem;
      line-height: 1.6;
    }

    .board-filter-modal {
      position: fixed;
      inset: 0;
      z-index: 41;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .board-filter-modal[hidden] {
      display: none;
    }

    .board-filter-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(22, 40, 77, 0.26);
      backdrop-filter: blur(6px);
      opacity: 0;
      transition: opacity 0.24s ease;
    }

    .board-filter-modal-panel {
      position: relative;
      width: min(100%, 620px);
      max-height: calc(100vh - 48px);
      overflow: auto;
      padding: 28px 24px 22px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 28px 58px rgba(22, 40, 77, 0.18);
      transform: translateY(18px) scale(0.98);
      opacity: 0;
      transition: transform 0.28s ease, opacity 0.28s ease;
      text-align: left;
    }

    .board-filter-modal.is-open .board-filter-modal-backdrop {
      opacity: 1;
    }

    .board-filter-modal.is-open .board-filter-modal-panel {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .board-filter-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
    }

    .board-filter-modal-title {
      margin: 0 0 8px;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.5rem, 2.7vw, 2rem);
      line-height: 1.08;
      letter-spacing: -0.03em;
    }

    .board-filter-modal-text {
      margin: 0;
      color: var(--muted);
      font-size: 0.96rem;
      line-height: 1.5;
    }

    .board-filter-reset {
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      padding: 10px 14px;
      background: var(--surface-raised);
      color: var(--ink);
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .board-filter-grid {
      display: grid;
      gap: 12px;
      max-height: min(48vh, 420px);
      overflow: auto;
      padding-right: 4px;
      margin-bottom: 22px;
    }

    .board-filter-option {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface-soft);
      box-shadow: var(--shadow-inset);
      cursor: pointer;
      user-select: none;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .board-filter-option:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.24);
      box-shadow: 0 10px 24px rgba(53, 111, 227, 0.08);
    }

    .board-filter-option.is-selected {
      border-color: rgba(77, 87, 255, 0.28);
      background: linear-gradient(180deg, rgba(77, 87, 255, 0.08) 0%, rgba(60, 53, 230, 0.12) 100%);
      box-shadow: 0 12px 24px rgba(60, 53, 230, 0.08);
    }

    .board-filter-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .board-filter-option-mark {
      width: 22px;
      height: 22px;
      border-radius: 8px;
      border: 1px solid var(--line-strong);
      background: var(--surface-raised);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      flex: 0 0 auto;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .board-filter-option-mark svg {
      width: 14px;
      height: 14px;
      display: block;
    }

    .board-filter-option.is-selected .board-filter-option-mark {
      border-color: transparent;
      background: linear-gradient(135deg, #6b8dff 0%, #4b35f5 100%);
      color: #ffffff;
      box-shadow: 0 10px 18px rgba(75, 53, 245, 0.18);
    }

    .board-filter-option-text {
      color: var(--ink);
      font-size: 0.96rem;
      line-height: 1.45;
      font-weight: 700;
    }

    .board-filter-empty {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .precheckin-modal {
      position: fixed;
      inset: 0;
      z-index: 42;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .precheckin-modal[hidden] {
      display: none;
    }

    .precheckin-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(22, 40, 77, 0.26);
      backdrop-filter: blur(6px);
      opacity: 0;
      transition: opacity 0.24s ease;
    }

    .precheckin-modal-panel {
      position: relative;
      width: min(100%, 620px);
      max-height: calc(100vh - 48px);
      overflow: auto;
      padding: 28px 24px 22px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 28px 58px rgba(22, 40, 77, 0.18);
      transform: translateY(18px) scale(0.98);
      opacity: 0;
      transition: transform 0.28s ease, opacity 0.28s ease;
      text-align: left;
    }

    .precheckin-modal.is-open .precheckin-modal-backdrop {
      opacity: 1;
    }

    .precheckin-modal.is-open .precheckin-modal-panel {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .precheckin-modal-panel.is-wide {
      width: min(100%, 820px);
    }

    .precheckin-modal-head {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 22px;
    }

    .precheckin-modal-head-icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #4169ff;
      background: rgba(65, 105, 255, 0.1);
      border: 1px solid rgba(65, 105, 255, 0.13);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .precheckin-modal-head-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }

    .precheckin-modal-title {
      margin: 0 0 8px;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.55rem, 2.8vw, 2.1rem);
      line-height: 1.08;
      letter-spacing: -0.03em;
    }

    .precheckin-modal-text {
      margin: 0;
      color: var(--muted);
      font-size: 0.96rem;
      line-height: 1.55;
    }

    .precheckin-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
      margin-bottom: 2px;
    }

    .precheckin-form-grid .field {
      width: 100%;
      max-width: none;
      margin: 0;
    }

    .precheckin-form-grid .field-label {
      margin-bottom: 8px;
      font-size: 0.84rem;
      font-weight: 800;
    }

    .precheckin-form-grid .is-wide {
      grid-column: 1 / -1;
    }

    #team-modal {
      align-items: stretch;
      justify-content: flex-end;
      padding: 0;
      z-index: 64;
    }

    #team-modal .precheckin-modal-backdrop {
      background: rgba(16, 37, 74, 0.2);
      backdrop-filter: blur(4px);
    }

    #team-modal .team-modal-panel {
      width: min(100%, 680px);
      height: 100dvh;
      max-height: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-left: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 20px 0 0 20px;
      background: #f8f9fc;
      box-shadow: -28px 0 64px rgba(22, 40, 77, 0.16);
      transform: translateX(100%);
      opacity: 1;
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #team-modal.is-open .team-modal-panel {
      transform: translateX(0);
    }

    .team-drawer-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      padding: 26px 28px 22px;
      background: #ffffff;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
    }

    .team-drawer-title {
      margin: 0 0 5px;
      color: var(--ink);
      font-size: 1.22rem;
      line-height: 1.25;
      font-weight: 780;
    }

    .team-drawer-subtitle {
      margin: 0;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .team-drawer-close {
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #ffffff;
      color: #50617e;
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
    }

    .team-drawer-body {
      height: calc(100dvh - 95px);
      overflow-y: auto;
      padding: 24px 28px 32px;
    }

    .team-overview {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-bottom: 22px;
      border: 1px solid rgba(39, 68, 125, 0.09);
      border-radius: 8px;
      background: #ffffff;
    }

    .team-overview-item {
      min-width: 0;
      padding: 15px 16px;
    }

    .team-overview-item + .team-overview-item {
      border-left: 1px solid rgba(39, 68, 125, 0.09);
    }

    .team-overview-value {
      display: block;
      margin-bottom: 2px;
      color: var(--ink);
      font-size: 1.18rem;
      line-height: 1.2;
      font-weight: 800;
    }

    .team-overview-label {
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.3;
    }

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

    .team-tabs {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px;
      border: 1px solid rgba(39, 68, 125, 0.09);
      border-radius: 8px;
      background: #eef1f6;
    }

    .team-tab {
      min-height: 34px;
      border: 0;
      border-radius: 6px;
      padding: 7px 12px;
      background: transparent;
      color: #66758f;
      font: inherit;
      font-size: 0.8rem;
      font-weight: 750;
      cursor: pointer;
    }

    .team-tab.is-active {
      background: #ffffff;
      color: var(--ink);
      box-shadow: 0 1px 4px rgba(22, 40, 77, 0.1);
    }

    .team-invite-toggle {
      min-height: 40px;
      border: 0;
      border-radius: 8px;
      padding: 10px 14px;
      background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bottom) 100%);
      color: #ffffff;
      font: inherit;
      font-size: 0.82rem;
      font-weight: 750;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(60, 53, 230, 0.14);
    }

    .team-invite-form {
      margin-bottom: 18px;
      padding: 18px;
      border: 1px solid rgba(39, 68, 125, 0.09);
      border-radius: 8px;
      background: #ffffff;
    }

    .team-invite-form[hidden] {
      display: none;
    }

    .team-invite-form-head {
      margin-bottom: 15px;
    }

    .team-invite-form-head strong {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
      font-size: 0.92rem;
    }

    .team-invite-form-head span {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.45;
    }

    .team-invite-grid {
      grid-template-columns: 1fr 1.2fr;
      gap: 12px;
    }

    .team-invite-form-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 15px;
    }

    .team-invite-form-actions .form-button {
      width: auto;
      min-width: 0;
      min-height: 42px;
      padding: 11px 16px;
      border-radius: 8px;
      font-size: 0.84rem;
      white-space: nowrap;
    }

    .team-role-help {
      grid-column: 1 / -1;
      margin: -2px 0 0;
      color: var(--muted);
      font-size: 0.75rem;
      line-height: 1.45;
    }

    .team-feedback {
      min-height: 0;
      margin: 0 0 12px;
      padding: 0;
      font-size: 0.82rem;
    }

    .team-feedback:empty {
      display: none;
    }

    .team-feedback.is-success {
      color: #18734a;
    }

    .team-list {
      display: grid;
      gap: 8px;
      min-height: 90px;
    }

    .team-member {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) minmax(150px, 0.65fr) auto;
      align-items: center;
      gap: 12px;
      padding: 13px 14px;
      border: 1px solid rgba(39, 68, 125, 0.09);
      border-radius: 8px;
      background: #ffffff;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .team-member:hover {
      border-color: rgba(65, 105, 255, 0.2);
      box-shadow: 0 8px 22px rgba(22, 40, 77, 0.05);
    }

    .team-member-avatar {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #edf0ff;
      color: var(--accent-bottom);
      font-size: 0.78rem;
      font-weight: 850;
    }

    .team-member-avatar.is-pending {
      background: #f2f3f6;
      color: #69758a;
    }

    .team-member-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .team-member-copy strong,
    .team-member-copy span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-member-copy strong {
      color: var(--ink);
      font-size: 0.88rem;
    }

    .team-member-copy span,
    .team-member-status {
      color: var(--muted);
      font-size: 0.74rem;
    }

    .team-member-meta {
      min-width: 0;
      display: grid;
      gap: 6px;
      justify-items: start;
    }

    .team-member select {
      width: 100%;
      min-width: 0;
      padding: 8px 30px 8px 10px;
      border-radius: 7px;
      font-size: 0.78rem;
    }

    .team-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #66758f;
      font-size: 0.72rem;
      font-weight: 700;
    }

    .team-status::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #20a36a;
    }

    .team-status.is-suspended::before {
      background: #d65b5b;
    }

    .team-status.is-pending::before {
      background: #d7962b;
    }

    .team-row-action {
      min-width: 82px;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 7px;
      padding: 9px 10px;
      background: #ffffff;
      color: #4c5f7f;
      font: inherit;
      font-size: 0.75rem;
      font-weight: 750;
      cursor: pointer;
    }

    .team-row-action.is-danger {
      border-color: rgba(184, 50, 50, 0.14);
      color: #a63d3d;
    }

    .team-row-action:disabled {
      opacity: 0.52;
      cursor: default;
    }

    .team-empty {
      display: grid;
      justify-items: center;
      gap: 5px;
      margin: 0;
      padding: 42px 20px;
      border: 1px dashed rgba(39, 68, 125, 0.16);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.62);
      color: var(--muted);
      text-align: center;
      font-size: 0.84rem;
      line-height: 1.5;
    }

    .team-empty strong {
      color: var(--ink);
      font-size: 0.9rem;
    }

    .team-activity-list {
      display: grid;
      gap: 0;
      border: 1px solid rgba(39, 68, 125, 0.09);
      border-radius: 8px;
      background: #ffffff;
      overflow: hidden;
    }

    .team-activity-item {
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr) auto;
      align-items: start;
      gap: 12px;
      padding: 14px 16px;
    }

    .team-activity-item + .team-activity-item {
      border-top: 1px solid rgba(39, 68, 125, 0.08);
    }

    .team-activity-dot {
      width: 7px;
      height: 7px;
      margin-top: 6px;
      border-radius: 50%;
      background: var(--accent-bottom);
    }

    .team-activity-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .team-activity-copy strong {
      color: var(--ink);
      font-size: 0.84rem;
    }

    .team-activity-copy span,
    .team-activity-time {
      color: var(--muted);
      font-size: 0.73rem;
      line-height: 1.4;
    }

    .team-row-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }

    .team-row-action.is-resend {
      color: var(--accent-bottom);
      border-color: rgba(77, 87, 255, 0.16);
    }

    .security-head {
      justify-content: space-between;
    }

    .security-session-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      padding: 16px;
      border: 1px solid rgba(39, 68, 125, 0.09);
      border-radius: 8px;
      background: #f8f9fc;
    }

    .security-session-row div {
      display: grid;
      gap: 4px;
    }

    .security-session-row strong {
      color: var(--ink);
      font-size: 0.9rem;
    }

    .security-session-row span {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.45;
    }

    #privacy-modal {
      align-items: stretch;
      justify-content: flex-end;
      padding: 0;
      z-index: 65;
    }

    #privacy-modal .precheckin-modal-backdrop {
      background: rgba(16, 37, 74, 0.22);
      backdrop-filter: blur(4px);
    }

    #privacy-modal .privacy-modal-panel {
      width: min(100%, 720px);
      height: 100dvh;
      max-height: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-left: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 20px 0 0 20px;
      background: #f8f9fc;
      box-shadow: -28px 0 64px rgba(22, 40, 77, 0.16);
      transform: translateX(100%);
      opacity: 1;
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #privacy-modal.is-open .privacy-modal-panel {
      transform: translateX(0);
    }

    .privacy-drawer-body {
      display: grid;
      gap: 18px;
    }

    .privacy-action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .privacy-card,
    .privacy-section,
    .privacy-delete-form {
      border: 1px solid rgba(39, 68, 125, 0.09);
      border-radius: 8px;
      background: #ffffff;
    }

    .privacy-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 17px;
    }

    .privacy-card.is-danger {
      background: #fffafa;
      border-color: rgba(184, 50, 50, 0.12);
    }

    .privacy-card-kicker {
      display: block;
      margin-bottom: 5px;
      color: var(--accent-bottom);
      font-size: 0.68rem;
      line-height: 1.2;
      font-weight: 850;
      text-transform: uppercase;
    }

    .privacy-card h4,
    .privacy-section h4 {
      margin: 0;
      color: var(--ink);
      font-size: 0.94rem;
      line-height: 1.25;
      font-weight: 800;
    }

    .privacy-card p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.5;
    }

    .privacy-section {
      padding: 16px;
    }

    .privacy-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .privacy-section-head span {
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.35;
      text-align: right;
    }

    .privacy-member-list,
    .privacy-login-list {
      display: grid;
      gap: 8px;
    }

    .privacy-mini-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 48px;
      padding: 10px 12px;
      border-radius: 8px;
      background: #f8f9fc;
    }

    .privacy-mini-row strong {
      display: block;
      overflow: hidden;
      color: var(--ink);
      font-size: 0.82rem;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .privacy-mini-row span {
      display: block;
      overflow: hidden;
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .privacy-mini-pill {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      border-radius: 999px;
      padding: 5px 9px;
      background: #eef1ff;
      color: var(--accent-bottom);
      font-size: 0.7rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .privacy-mini-pill.is-muted {
      background: #eef1f6;
      color: #66758f;
    }

    .privacy-delete-form {
      display: grid;
      gap: 12px;
      padding: 16px;
    }

    .privacy-delete-form[hidden] {
      display: none;
    }

    .form-button.is-danger {
      background: linear-gradient(180deg, #d95f5f 0%, #b93f3f 100%);
      box-shadow: 0 10px 22px rgba(185, 63, 63, 0.18);
    }

    .note-item.is-unread {
      border-color: rgba(77, 87, 255, 0.24);
    }

    .note-receipt-row {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 6px;
      padding-top: 11px;
      border-top: 1px solid rgba(39, 68, 125, 0.08);
    }

    .note-receipt-status {
      color: var(--muted);
      font-size: 0.72rem;
    }

    .note-read-button {
      border: 1px solid rgba(77, 87, 255, 0.17);
      border-radius: 7px;
      padding: 8px 10px;
      background: #f5f6ff;
      color: var(--accent-bottom);
      font: inherit;
      font-size: 0.73rem;
      font-weight: 800;
      cursor: pointer;
    }

    .note-read-confirmed {
      color: #18734a;
      font-size: 0.73rem;
      font-weight: 750;
    }

    .note-author {
      grid-column: 1 / -1;
      margin: 4px 0 0;
      padding-top: 10px;
      border-top: 1px solid rgba(39, 68, 125, 0.08);
      color: var(--muted);
      font-size: 0.76rem;
    }

    .precheckin-list {
      display: grid;
      gap: 12px;
      margin-bottom: 20px;
    }

    .precheckin-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 18px;
      border-radius: 22px;
      background:
        radial-gradient(circle at 96% 0%, rgba(65, 105, 255, 0.07), transparent 28%),
        rgba(255, 255, 255, 0.86);
      border: 1px solid rgba(120, 140, 180, 0.16);
      box-shadow:
        0 14px 38px rgba(15, 35, 75, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      transition: transform 0.22s ease, opacity 0.22s ease, box-shadow 0.22s ease;
    }

    .precheckin-card:hover {
      transform: translateY(-1px);
      box-shadow:
        0 18px 48px rgba(15, 35, 75, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .precheckin-card.is-completing {
      opacity: 0;
      transform: translateX(20px) scale(0.98);
    }

    .precheckin-card-main {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .precheckin-card-title {
      margin: 0;
      color: var(--ink);
      font-size: 1.05rem;
      line-height: 1.25;
      font-weight: 900;
    }

    .precheckin-card-subtitle {
      margin: 0;
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 700;
    }

    .precheckin-card-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

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

    .precheckin-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      max-width: 100%;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(65, 105, 255, 0.08);
      color: #38517f;
      border: 1px solid rgba(65, 105, 255, 0.12);
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .precheckin-chip svg {
      width: 15px;
      height: 15px;
      display: block;
      flex: 0 0 auto;
    }

    .precheckin-notify,
    .precheckin-complete {
      border: 1px solid rgba(36, 150, 91, 0.2);
      border-radius: 999px;
      padding: 10px 13px;
      background: rgba(36, 150, 91, 0.09);
      color: #176c43;
      font-size: 0.84rem;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .precheckin-notify {
      border-color: rgba(65, 105, 255, 0.18);
      background: rgba(65, 105, 255, 0.08);
      color: #3147a3;
    }

    .precheckin-notify:hover,
    .precheckin-complete:hover {
      transform: translateY(-1px);
      background: rgba(36, 150, 91, 0.13);
      box-shadow: 0 10px 22px rgba(36, 150, 91, 0.08);
    }

    .precheckin-notify:hover {
      background: rgba(65, 105, 255, 0.12);
      box-shadow: 0 10px 22px rgba(65, 105, 255, 0.08);
    }

    .precheckin-notify.is-done {
      border-color: rgba(36, 150, 91, 0.18);
      background: rgba(36, 150, 91, 0.08);
      color: #176c43;
      cursor: default;
    }

    .precheckin-empty {
      margin: 0 0 20px;
      padding: 20px;
      border-radius: 20px;
      border: 1px solid rgba(120, 140, 180, 0.14);
      background: rgba(65, 105, 255, 0.045);
      color: var(--muted);
      font-size: 0.96rem;
      line-height: 1.55;
      text-align: center;
    }

    .notes-empty {
      margin: 18px 0 0;
      color: var(--muted);
      text-align: center;
    }

    .count-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      max-width: 520px;
      margin: 0 auto 18px;
    }

    .category-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      max-width: 560px;
      margin: 0 auto 18px;
    }

    .issue-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      max-width: 760px;
      margin: 0 auto 18px;
    }

    .issue-pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 14px 18px;
      background: var(--surface-raised);
      color: var(--ink);
      font-size: 0.96rem;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .issue-pill:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.24);
      box-shadow: 0 12px 24px rgba(53, 111, 227, 0.08);
    }

    .issue-pill.is-selected {
      border-color: rgba(77, 87, 255, 0.28);
      background: linear-gradient(180deg, rgba(77, 87, 255, 0.1) 0%, rgba(60, 53, 230, 0.14) 100%);
      box-shadow: 0 12px 24px rgba(60, 53, 230, 0.08);
    }

    .pill-creator {
      max-width: 560px;
      margin: 8px auto 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .pill-creator .field-input {
      margin: 0;
    }

    .pill-add-button {
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      padding: 0 18px;
      height: 54px;
      background: var(--surface-raised);
      color: var(--ink);
      font-size: 0.96rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .resolution-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      max-width: 920px;
      margin: 0 auto 18px;
    }

    .resolution-pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 14px 18px;
      background: var(--surface-raised);
      color: var(--ink);
      font-size: 0.96rem;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .resolution-pill:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.24);
      box-shadow: 0 12px 24px rgba(53, 111, 227, 0.08);
    }

    .resolution-pill.is-selected {
      border-color: rgba(77, 87, 255, 0.28);
      background: linear-gradient(180deg, rgba(77, 87, 255, 0.1) 0%, rgba(60, 53, 230, 0.14) 100%);
      box-shadow: 0 12px 24px rgba(60, 53, 230, 0.08);
    }

    .category-tile {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 20px 22px;
      background: var(--surface-soft);
      box-shadow: var(--shadow-inset);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .category-tile:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.24);
      box-shadow: 0 10px 24px rgba(53, 111, 227, 0.08);
    }

    .category-tile.is-selected {
      border-color: rgba(77, 87, 255, 0.28);
      background: linear-gradient(180deg, rgba(77, 87, 255, 0.08) 0%, rgba(60, 53, 230, 0.12) 100%);
      box-shadow: 0 12px 24px rgba(60, 53, 230, 0.08);
    }

    .category-title {
      display: block;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.4;
    }

    body.category-chooser-open {
      overflow: hidden;
    }

    body.category-chooser-open #screen-board {
      opacity: 0.62;
      filter: blur(2px) saturate(104%);
      transform: scale(0.996);
      pointer-events: none;
    }

    #screen-board {
      transition: opacity 0.62s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.62s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .category-chooser-overlay {
      position: fixed;
      inset: 0;
      z-index: 95;
      display: block;
      padding: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.36s ease;
    }

    .category-chooser-overlay[hidden] {
      display: none;
    }

    .category-chooser-overlay.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .category-chooser-backdrop {
      position: fixed;
      inset: 0;
      border: 0;
      background: rgba(247, 245, 239, 0.24);
      backdrop-filter: blur(2px) saturate(106%);
      -webkit-backdrop-filter: blur(2px) saturate(106%);
      animation: categoryVeilIn 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .category-chooser-dialog {
      position: fixed;
      inset: 0;
      z-index: 1;
      width: 100vw;
      min-height: 100dvh;
      display: grid;
      grid-template-columns: minmax(360px, 720px) minmax(210px, 280px);
      grid-template-rows: auto auto auto;
      align-content: center;
      justify-content: center;
      column-gap: clamp(34px, 5vw, 72px);
      row-gap: 18px;
      padding: clamp(28px, 4vw, 56px);
      border: 0;
      border-radius: 0;
      background:
        radial-gradient(circle at 74% 18%, rgba(77, 87, 255, 0.1), transparent 30%),
        radial-gradient(circle at 18% 82%, rgba(255, 255, 255, 0.54), transparent 34%),
        rgba(255, 255, 255, 0.16);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      color: var(--ink);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .category-chooser-dialog:focus {
      outline: none;
    }

    .category-chooser-overlay.is-open .category-chooser-dialog {
      opacity: 1;
      transform: translateY(0);
    }

    .category-chooser-head {
      grid-column: 1 / 2;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      align-self: start;
      padding-right: 0;
      text-align: left;
    }

    .category-chooser-kicker {
      display: inline-flex;
      min-height: 26px;
      margin: 0 0 10px;
      padding: 6px 10px 5px;
      border: 1px solid rgba(65, 105, 255, 0.13);
      border-radius: 8px;
      background: rgba(65, 105, 255, 0.07);
      color: #4169ff;
      font-size: 0.72rem;
      line-height: 1;
      font-weight: 850;
      text-transform: uppercase;
    }

    .category-chooser-title {
      margin: 0;
      color: var(--ink);
      font-size: clamp(1.9rem, 3.1vw, 3.25rem);
      line-height: 1.05;
      font-weight: 780;
      letter-spacing: 0;
    }

    .category-chooser-text {
      max-width: 560px;
      margin: 9px 0 0;
      color: var(--muted);
      font-size: clamp(0.94rem, 1.1vw, 1.04rem);
      line-height: 1.5;
    }

    .category-chooser-close {
      position: absolute;
      top: clamp(22px, 3vw, 36px);
      right: clamp(22px, 3vw, 36px);
      width: 44px;
      height: 44px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.72);
      color: rgba(16, 37, 74, 0.72);
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .category-chooser-close:hover,
    .category-chooser-close:focus-visible {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, 0.96);
      color: var(--ink);
    }

    #board-category-chooser-form {
      grid-column: 1 / 2;
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: auto auto auto;
      gap: 14px;
      align-self: start;
    }

    .category-carousel {
      min-width: 0;
      align-self: start;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 48px;
      align-items: center;
      gap: 14px;
    }

    .category-carousel-viewport {
      overflow: hidden;
      border-radius: 18px;
    }

    .category-carousel-track {
      display: flex;
      transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
      will-change: transform;
    }

    .category-slide {
      min-width: 100%;
      min-height: clamp(238px, 31vh, 310px);
      display: grid;
      align-content: center;
      justify-items: start;
      gap: 14px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 18px;
      padding: clamp(24px, 3.2vw, 34px);
      background: rgba(255, 255, 255, 0.72);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      box-shadow: 0 24px 70px rgba(15, 35, 75, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(16px) saturate(124%);
      -webkit-backdrop-filter: blur(16px) saturate(124%);
      transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    }

    .category-slide.is-selected {
      transform: translateY(-3px);
      border-color: rgba(77, 87, 255, 0.28);
      box-shadow: 0 28px 78px rgba(60, 53, 230, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }

    .category-slide-icon {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--accent-bottom);
      box-shadow: 0 16px 36px rgba(15, 35, 75, 0.08);
    }

    .category-slide-icon svg {
      width: 23px;
      height: 23px;
      display: block;
    }

    .category-slide-label {
      margin: 0;
      color: var(--ink);
      font-size: clamp(2.05rem, 4.6vw, 4rem);
      line-height: 1.02;
      font-weight: 820;
    }

    .category-slide-copy {
      max-width: 460px;
      margin: 0;
      color: var(--muted);
      font-size: clamp(0.94rem, 1.2vw, 1.08rem);
      line-height: 1.5;
    }

    .category-carousel-arrow {
      width: 48px;
      height: 48px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.6);
      color: var(--ink);
      font-size: 1.45rem;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(15, 35, 75, 0.06);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .category-carousel-arrow:hover,
    .category-carousel-arrow:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.24);
      background: rgba(255, 255, 255, 0.96);
    }

    .category-chooser-footer {
      grid-column: 1 / 2;
      display: grid;
      gap: 12px;
      justify-items: start;
      align-self: start;
      padding-left: 62px;
      padding-right: 0;
    }

    .category-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }

    .category-dot {
      width: 8px;
      height: 8px;
      border: 0;
      border-radius: 999px;
      padding: 0;
      background: rgba(80, 101, 143, 0.28);
      cursor: pointer;
      transition: width 0.22s ease, background 0.22s ease;
    }

    .category-dot.is-active {
      width: 22px;
      background: var(--accent-bottom);
    }

    .category-continue {
      min-width: 210px;
    }

    @keyframes categoryVeilIn {
      0% {
        opacity: 0;
        backdrop-filter: blur(0) saturate(100%);
        -webkit-backdrop-filter: blur(0) saturate(100%);
      }

      100% {
        opacity: 1;
        backdrop-filter: blur(2px) saturate(106%);
        -webkit-backdrop-filter: blur(2px) saturate(106%);
      }
    }

    .screen-note-group {
      max-width: min(920px, 100%);
    }

    .group-note-form {
      display: grid;
      gap: 16px;
      width: min(840px, 100%);
      margin: 0 auto;
    }

    .group-form-card {
      display: grid;
      gap: 16px;
      padding: 20px;
      border-radius: 26px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      background:
        radial-gradient(circle at 94% 0%, rgba(65, 105, 255, 0.06), transparent 30%),
        rgba(255, 255, 255, 0.86);
      box-shadow:
        0 18px 48px rgba(15, 35, 75, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
      text-align: left;
    }

    .group-form-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding-bottom: 2px;
    }

    .group-form-kicker {
      color: var(--ink);
      font-size: 0.82rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .group-form-hint {
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 750;
      line-height: 1.35;
    }

    .group-form-card .field {
      max-width: none;
      margin: 0;
    }

    .group-choice-grid,
    .group-checkout-grid {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 10px;
    }

    .group-choice-pill,
    .group-check-row {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 48px;
      padding: 12px 15px;
      border-radius: 18px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      background: rgba(255, 255, 255, 0.74);
      color: #38517f;
      font-size: 0.9rem;
      font-weight: 850;
      line-height: 1.25;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .group-choice-pill:hover,
    .group-check-row:hover {
      transform: translateY(-1px);
      border-color: rgba(65, 105, 255, 0.2);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 10px 22px rgba(15, 35, 75, 0.055);
    }

    .group-choice-pill input,
    .group-check-row input {
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      flex: 0 0 auto;
      border: 1.5px solid rgba(80, 101, 143, 0.32);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .group-choice-pill input {
      border-radius: 999px;
    }

    .group-check-row input {
      border-radius: 6px;
    }

    .group-choice-pill input:checked {
      border-color: rgba(65, 105, 255, 0.9);
      background:
        radial-gradient(circle at center, #4169ff 0 38%, transparent 42%),
        #ffffff;
      box-shadow: 0 0 0 4px rgba(65, 105, 255, 0.1);
    }

    .group-check-row input:checked {
      border-color: rgba(65, 105, 255, 0.95);
      background:
        linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.96) 42% 58%, transparent 58%),
        linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.96) 48% 62%, transparent 62%),
        #4169ff;
      box-shadow: 0 0 0 4px rgba(65, 105, 255, 0.1);
    }

    .group-choice-pill:has(input:checked),
    .group-check-row:has(input:checked) {
      border-color: rgba(65, 105, 255, 0.22);
      background: rgba(65, 105, 255, 0.075);
      color: var(--ink);
    }

    .group-choice-pill.is-soft {
      min-height: 42px;
      padding: 10px 13px;
      border-radius: 999px;
      font-size: 0.84rem;
    }

    .group-textarea {
      min-height: 116px;
      resize: vertical;
    }

    .count-tile {
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 18px 10px;
      background: var(--surface-soft);
      box-shadow: var(--shadow-inset);
      color: #31476f;
      font-size: 1.05rem;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .count-tile:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.20);
      box-shadow: 0 10px 24px rgba(53, 111, 227, 0.10);
    }

    .count-tile.is-selected {
      border-color: rgba(77, 87, 255, 0.28);
      background: linear-gradient(180deg, rgba(77, 87, 255, 0.10) 0%, rgba(60, 53, 230, 0.14) 100%);
      color: var(--ink);
      box-shadow: 0 12px 24px rgba(60, 53, 230, 0.10);
    }

    @media (max-width: 1280px) {
      .hero-visual,
      .hero-visual3d {
        width: min(980px, 96vw);
        height: clamp(330px, 41vh, 384px);
      }

      .startup-showcase {
        width: min(960px, 95vw);
        height: clamp(318px, 39vh, 366px);
      }

      .hero-object-wrap {
        width: clamp(312px, 27vw, 344px);
        height: clamp(228px, 20vw, 258px);
      }

      .hotel-key-card-wrap {
        left: 10%;
        bottom: 2%;
        width: 136px;
        height: 166px;
      }

      .floating-card {
        min-width: 220px;
        max-width: 240px;
      }

      .floating-card-wrap[data-card="reception"] {
        left: -9%;
        top: 18%;
      }

      .floating-card-wrap[data-card="maintenance"] {
        right: -4%;
        top: 9%;
      }

      .floating-card-wrap[data-card="client"] {
        right: 0;
        bottom: 4%;
      }
    }

    @media (max-width: 1080px) {
      .hero-lcdc {
        padding-top: clamp(18px, 2.5vh, 26px);
      }

      .hero-title {
        font-size: clamp(2.05rem, 3.7vw, 2.65rem);
      }

      .hero-visual,
      .hero-visual3d {
        width: min(900px, 96vw);
        height: clamp(326px, 40vh, 370px);
      }

      .hero-object-wrap {
        width: clamp(292px, 27vw, 332px);
        height: clamp(214px, 19.5vw, 246px);
      }

      .hotel-key-card-wrap {
        width: 126px;
        height: 154px;
        left: 9%;
        bottom: 2%;
      }

      .floating-card-wrap[data-card="reception"] {
        left: -6%;
        top: 20%;
      }

      .floating-card-wrap[data-card="maintenance"] {
        right: -3%;
        top: 10%;
      }

      .floating-card-wrap[data-card="client"] {
        right: 1%;
        bottom: 5%;
      }

      .floating-card {
        min-width: 200px;
        max-width: 226px;
        padding: 13px 15px;
      }

      .startup-showcase {
        width: min(880px, 95vw);
        height: clamp(312px, 38vh, 352px);
      }

      .board-panel-head {
        flex-direction: column;
        align-items: stretch;
      }

      .board-panel-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
      }

      .note-item-head {
        align-items: flex-start;
      }

      .category-chooser-footer {
        padding-right: 0;
      }
    }

    @media (max-width: 920px) {
      body {
        padding: 16px;
      }

      .topbar {
        top: 18px;
        right: 18px;
      }

      .screen {
        max-width: min(700px, 100%);
        padding: 24px 16px;
      }

      .form-actions {
        gap: 10px 16px;
      }

      .form-button {
        min-width: min(240px, 100%);
      }

      .category-chooser-overlay {
        padding: 0;
        overflow-y: auto;
      }

      .category-chooser-dialog {
        min-height: 100dvh;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        gap: 14px;
        align-content: start;
        justify-content: stretch;
        padding: 74px 18px 24px;
      }

      .category-chooser-head {
        padding-right: 34px;
      }

      .category-carousel {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        gap: 8px;
      }

      .category-carousel-arrow {
        width: 36px;
        height: 36px;
      }

      .category-slide {
        min-height: 214px;
        padding: 22px 20px;
      }

      .category-slide-label {
        font-size: clamp(1.9rem, 10vw, 3.4rem);
      }

      .category-chooser-footer {
        padding-left: 44px;
      }

      .field-grid,
      .priority-stack {
        grid-template-columns: minmax(0, 1fr);
      }

      .group-note-form {
        width: min(100%, 720px);
      }

      .group-choice-grid,
      .group-checkout-grid {
        align-items: stretch;
      }

      .group-choice-pill,
      .group-check-row {
        flex: 1 1 220px;
      }

      .note-taxi-meta {
        grid-template-columns: minmax(0, 1fr);
      }

      .note-item.is-taxi-transfer {
        padding: 18px;
        border-radius: 24px;
      }

      .note-item.is-group-arrival {
        padding: 18px;
        border-radius: 24px;
      }

      .note-group-detail-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .note-taxi-route {
        padding: 16px;
        border-radius: 22px;
      }

      .note-taxi-route-head {
        align-items: stretch;
      }

      .note-taxi-route-pill,
      .note-taxi-route-pill.is-fare {
        width: 100%;
        margin-left: 0;
      }

      .note-taxi-route-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }

      .note-taxi-route-body::before {
        top: 58px;
        bottom: 58px;
        left: 31px;
        right: auto;
        border-top: 0;
        border-left: 1px dashed rgba(65, 105, 255, 0.22);
        transform: none;
      }

      .note-taxi-arrow {
        width: 36px;
        height: 36px;
        justify-self: start;
        margin-left: 13px;
        transform: rotate(90deg);
      }

      .pill-creator {
        grid-template-columns: minmax(0, 1fr);
      }

      .pill-add-button {
        width: 100%;
      }

      .hero-title {
        font-size: clamp(2.15rem, 5.4vw, 2.8rem);
      }

      .hero-lcdc {
        min-height: auto;
        padding-top: 84px;
        gap: 18px;
      }

      .hero-visual,
      .hero-visual3d {
        width: min(100%, 700px);
        height: 356px;
      }

      .startup-showcase {
        width: min(700px, 94vw);
        height: 326px;
        transform: rotateX(8deg) rotateY(-7deg) rotateZ(0deg);
      }

      .startup-slide {
        grid-template-columns: minmax(0, 1fr);
      }

      .startup-slide-copy {
        display: none;
      }

      .hero-object-wrap {
        width: 280px;
        height: 212px;
      }

      .hotel-key-card-wrap {
        width: 112px;
        height: 140px;
        left: 5%;
        bottom: 3%;
      }

      .floating-card {
        min-width: 208px;
        max-width: 228px;
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 14px 15px;
      }

      .floating-card-icon {
        width: 38px;
        height: 38px;
      }

      .floating-card-icon svg {
        width: 18px;
        height: 18px;
      }

      .floating-card-wrap[data-card="reception"] {
        left: -1%;
        top: 28%;
      }

      .floating-card-wrap[data-card="client"] {
        right: 2%;
        bottom: 8%;
      }

      .floating-card-wrap[data-card="maintenance"] {
        display: none;
      }

      .hero-text,
      .form-text {
        max-width: 480px;
      }

      .board-header {
        grid-template-columns: 52px minmax(220px, 1fr) 52px;
        gap: 12px;
        padding: 16px;
      }

      .board-logo-icon,
      .board-avatar-button {
        width: 42px;
        height: 42px;
      }

      .board-body {
        padding: 18px 14px 20px;
      }

      .board-panel {
        border-radius: 22px;
      }

      .board-panel-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .ops-search {
        min-height: 44px;
      }

      .board-add-button,
      .board-archive-button,
      .board-return-button,
      .board-precheckin-button {
        height: 44px;
      }

      .board-add-button,
      .board-archive-button {
        width: 44px;
      }

      .precheckin-menu {
        left: 0;
        right: auto;
      }

      .note-item {
        padding: 18px;
      }

      .note-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
      }

      .note-item.is-general-instruction {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
      }

      .note-item.is-general-instruction .note-item-head {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
        align-self: auto;
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid rgba(120, 140, 180, 0.14);
        border-left: 0;
      }

      .note-item.is-general-instruction .note-actions {
        width: auto;
      }

      .note-general-body {
        grid-column: 1;
        grid-row: 1;
      }

      .note-item.is-sensitive-situation {
        padding: 20px;
      }

      .note-item.is-sensitive-situation .note-item-head {
        align-items: stretch;
      }

      .note-sensitive-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .note-item.is-sensitive-situation .note-actions {
        width: auto;
        align-self: flex-start;
      }
    }

    @media (max-width: 900px) {
      .team-invite-grid {
        grid-template-columns: 1fr;
      }

      .team-member {
        grid-template-columns: 42px minmax(0, 1fr) minmax(140px, 0.7fr) auto;
      }
    }

    @media (max-width: 720px) {
      #team-modal .team-modal-panel {
        width: 100%;
        border-left: 0;
        border-radius: 0;
      }

      .team-drawer-head {
        padding: 20px 18px 17px;
      }

      .team-drawer-body {
        height: calc(100dvh - 82px);
        padding: 18px 16px 28px;
      }

      .team-overview-item {
        padding: 13px 10px;
      }

      .team-overview-label {
        font-size: 0.69rem;
      }

      .team-toolbar {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      .team-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .team-invite-toggle {
        width: 100%;
      }

      .team-invite-form {
        padding: 16px;
      }

      .team-member {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: start;
      }

      .team-member-meta {
        grid-column: 2 / -1;
        width: 100%;
      }

      .team-row-action {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
      }

      .team-row-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
      }

      .security-session-row {
        grid-template-columns: minmax(0, 1fr);
      }

      #privacy-modal .privacy-modal-panel {
        width: 100%;
        border-left: 0;
        border-radius: 0;
      }

      .privacy-action-grid {
        grid-template-columns: 1fr;
      }

      .privacy-card {
        grid-template-columns: minmax(0, 1fr);
      }

      .privacy-mini-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .privacy-mini-pill {
        justify-self: start;
      }

      .note-receipt-row {
        align-items: flex-start;
        flex-direction: column;
      }

      .notes-category-group.is-general-instructions {
        padding: 18px;
        border-radius: 24px;
      }

      .notes-category-group.is-general-instructions .notes-category-title {
        align-items: flex-start;
      }

      .notes-category-subtitle {
        width: 100%;
      }

      .note-item.is-general-instruction {
        padding: 18px;
      }

      .note-general-body {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 13px;
      }

      .note-general-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
      }

      .note-general-card-icon .note-instruction-svg {
        width: 21px;
        height: 21px;
      }

      .notes-category-group.is-sensitive-situations {
        padding: 18px;
        border-radius: 24px;
      }

      .note-item.is-sensitive-situation {
        padding: 18px;
        border-radius: 24px;
      }

      .note-item.is-sensitive-situation .note-item-head {
        gap: 14px;
      }

      .note-sensitive-heading {
        width: 100%;
      }

      .note-sensitive-heading-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
      }

      .note-item.is-sensitive-situation .note-actions {
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid rgba(120, 140, 180, 0.14);
        border-left: 0;
      }

      .note-sensitive-solutions,
      .note-sensitive-description {
        padding: 16px;
      }

      .note-item.is-taxi-transfer .note-item-head {
        gap: 14px;
      }

      .note-taxi-heading {
        width: 100%;
      }

      .note-item.is-taxi-transfer .note-actions {
        align-items: stretch;
      }

      .note-item.is-group-arrival .note-actions {
        align-items: stretch;
      }

      .note-item.is-taxi-transfer .note-cancel-transfer {
        white-space: nowrap;
      }

      .notes-category-group.is-group-arrivals {
        padding: 18px;
        border-radius: 24px;
      }

      .note-item.is-group-arrival .note-item-head {
        gap: 14px;
      }

      .note-group-heading {
        width: 100%;
      }

      .precheckin-form-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .precheckin-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
      }

      .precheckin-card-actions {
        justify-content: flex-start;
      }

      .hero-lcdc .logo {
        width: min(100%, 206px);
      }

      .hero-visual,
      .hero-visual3d {
        width: min(100%, 520px);
        height: 330px;
      }

      .startup-showcase {
        width: min(500px, 94vw);
        height: 300px;
        transform: rotateX(6deg) rotateY(-4deg);
      }

      .startup-panel {
        padding: 14px;
        border-radius: 26px;
      }

      .startup-row {
        grid-template-columns: minmax(0, 1fr);
        min-height: 60px;
        padding: 10px;
      }

      .startup-row-pill {
        display: none;
      }

      .startup-row-icon {
        width: 36px;
        height: 36px;
        border-radius: 13px;
      }

      .hero-object-wrap {
        width: 266px;
        height: 206px;
      }

      .hotel-key-card-wrap {
        width: 102px;
        height: 126px;
        left: 5%;
        bottom: 5%;
      }

      .hotel-key-card {
        inset: 0 18px 4px 0;
        padding: 14px 12px;
        border-radius: 20px;
      }

      .hotel-key-card-copy {
        gap: 9px;
      }

      .hotel-key-card-monogram {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
      }

      .hotel-key-card-title {
        font-size: 1.32rem;
      }

      .hotel-key-card-stars {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
      }

      .hotel-key-ring {
        width: 62px;
        height: 62px;
      }

      .hotel-key-ring::before {
        left: 8px;
        top: 4px;
        width: 26px;
        height: 26px;
      }

      .hotel-key-medal {
        left: 20px;
        width: 42px;
        height: 42px;
        font-size: 1.3rem;
      }

      .floating-card-wrap[data-card="maintenance"],
      .floating-card-wrap[data-card="client"] {
        display: none;
      }

      .floating-card-wrap[data-card="reception"] {
        left: 2%;
        top: 10%;
      }

      .floating-card {
        min-width: 196px;
        max-width: 208px;
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 12px 14px;
        gap: 12px;
      }

      .floating-card-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
      }

      .hero-copy {
        gap: 12px;
      }

      .hero-title {
        font-size: clamp(2rem, 8.5vw, 2.55rem);
        line-height: 1.08;
      }

      .hero-text {
        font-size: 1rem;
      }

      .cta-button {
        min-height: 64px;
        font-size: 1.08rem;
      }

    }

    @media (max-width: 560px) {
      .code-input {
        letter-spacing: 0.16em;
      }

      .note-item.is-general-instruction {
        padding: 15px;
      }

      .note-general-body {
        grid-template-columns: minmax(0, 1fr);
      }

      .note-general-card-icon {
        width: 42px;
        height: 42px;
      }

      .note-item.is-general-instruction .note-actions {
        flex-wrap: wrap;
        gap: 7px;
      }

      .note-sensitive-info-grid,
      .note-sensitive-solutions-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .note-sensitive-info-card.note-context-chip {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 14px;
      }

      .note-sensitive-info-icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
      }

      .note-item.is-sensitive-situation {
        padding: 15px;
      }

      .note-item.is-sensitive-situation .note-actions {
        flex-wrap: wrap;
        gap: 7px;
      }

      .board-precheckin-button span:not(.board-precheckin-count) {
        display: none;
      }

      .board-precheckin-button {
        width: 44px;
        padding: 0;
        justify-content: center;
      }

      .precheckin-menu {
        width: min(270px, calc(100vw - 52px));
      }

      .precheckin-card-actions {
        align-items: stretch;
      }

      .precheckin-notify,
      .precheckin-complete {
        width: 100%;
        justify-content: center;
      }

      .note-item.is-taxi-transfer {
        padding: 15px;
      }

      .note-item.is-group-arrival {
        padding: 15px;
      }

      .note-taxi-meta-item,
      .note-taxi-route {
        padding: 14px;
      }

      .group-form-card,
      .note-group-summary,
      .note-group-section {
        padding: 14px;
        border-radius: 20px;
      }

      .note-taxi-client-chips,
      .note-item.is-taxi-transfer .note-actions,
      .note-item.is-group-arrival .note-actions,
      .note-group-chip-grid {
        gap: 7px;
      }

      .note-taxi-chip,
      .note-taxi-route-pill,
      .note-group-chip {
        width: 100%;
      }

      .hero-lcdc {
        padding-inline: 18px;
        padding-top: 84px;
      }

      .hero-lcdc .logo {
        width: min(100%, 182px);
      }

      .hero-visual,
      .hero-visual3d {
        width: min(100%, 420px);
        height: 286px;
      }

      .startup-showcase {
        width: min(380px, 92vw);
        height: 258px;
      }

      .startup-panel-top {
        margin-bottom: 10px;
      }

      .startup-slide-board {
        gap: 9px;
        padding: 12px;
        border-radius: 20px;
      }

      .startup-board-head strong {
        font-size: 0.9rem;
      }

      .startup-board-head span,
      .startup-row-copy span {
        font-size: 0.76rem;
      }

      .startup-row-copy strong {
        font-size: 0.84rem;
      }

      .startup-progress {
        bottom: -12px;
      }

      .hero-object-wrap {
        width: 246px;
        height: 192px;
      }

      .hero-text {
        font-size: 0.98rem;
      }

      .hotel-key-card-wrap {
        width: 88px;
        height: 112px;
        left: 4%;
        bottom: 5%;
      }

      .floating-card-wrap {
        display: none;
      }
    }

    /* Reception service handoff */
    .shift-target-field {
      margin-top: 14px;
    }

    .shift-target-field select {
      min-height: 50px;
      appearance: auto;
      background: #ffffff;
    }

    body.shift-settings-open {
      overflow: hidden;
    }

    body.shift-settings-open #screen-board {
      opacity: 0.76;
      filter: blur(1.2px) saturate(102%);
      -webkit-filter: blur(1.2px) saturate(102%);
      pointer-events: none;
    }

    #shift-settings-modal {
      z-index: 124;
    }

    #shift-settings-modal .precheckin-modal-backdrop {
      background: rgba(247, 248, 252, 0.28);
      backdrop-filter: blur(2px) saturate(102%);
      -webkit-backdrop-filter: blur(2px) saturate(102%);
    }

    .shift-settings-panel {
      width: min(100%, 720px);
      padding: 0;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 12px;
      overflow: hidden;
    }

    .shift-settings-panel .team-drawer-head {
      padding: 24px 26px 20px;
    }

    .shift-settings-form {
      padding: 0 26px;
    }

    .shift-settings-list {
      border-top: 1px solid rgba(39, 68, 125, 0.09);
    }

    .shift-settings-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 240px;
      align-items: center;
      gap: 22px;
      min-height: 94px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
    }

    .shift-settings-identity {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
    }

    .shift-settings-icon,
    .note-shift-icon,
    .shift-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .shift-settings-icon {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: #f3f4ff;
      color: #4d57ff;
    }

    .shift-settings-icon.is-evening {
      background: #fff5e8;
      color: #a65c08;
    }

    .shift-settings-icon.is-night {
      background: #edf2fb;
      color: #315e9f;
    }

    .shift-settings-icon svg {
      width: 20px;
      height: 20px;
    }

    .shift-settings-name,
    .shift-settings-times label {
      display: grid;
      gap: 5px;
    }

    .shift-settings-name > span,
    .shift-settings-times span {
      color: #77849a;
      font-size: 0.68rem;
      font-weight: 700;
    }

    .shift-settings-name .field-input,
    .shift-settings-times .field-input {
      min-height: 42px;
      border-radius: 7px;
      padding: 9px 11px;
    }

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

    .shift-settings-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 -26px;
      padding: 16px 26px;
      border-top: 1px solid rgba(39, 68, 125, 0.09);
      background: #fbfcfe;
    }

    .shift-settings-actions .form-button {
      min-width: 170px;
    }

    .board-filter-section + .board-filter-section {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(39, 68, 125, 0.08);
    }

    .board-filter-section-label {
      display: block;
      margin-bottom: 9px;
      color: #6d7b93;
      font-size: 0.7rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .board-filter-section .board-filter-grid {
      margin-bottom: 0;
    }

    .board-filter-grid.is-shifts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      overflow: visible;
    }

    .board-filter-option.is-shift-option {
      min-height: 52px;
      padding: 10px 12px;
      border-radius: 8px;
    }

    .board-filter-option.is-shift-option .board-filter-option-icon svg {
      width: 19px;
      height: 19px;
    }

    .note-shift-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 5px 9px;
      border: 1px solid rgba(77, 87, 255, 0.12);
      border-radius: 7px;
      background: #f5f6ff;
      color: #4049c9;
      font-size: 0.68rem;
      font-weight: 780;
    }

    .note-shift-badge.is-evening {
      border-color: rgba(166, 92, 8, 0.14);
      background: #fff8ef;
      color: #8a510e;
    }

    .note-shift-badge.is-night {
      border-color: rgba(49, 94, 159, 0.14);
      background: #f1f5fb;
      color: #315e9f;
    }

    .note-shift-icon {
      width: 15px;
      height: 15px;
    }

    .note-shift-icon svg,
    .note-claim-status-icon svg {
      width: 100%;
      height: 100%;
    }

    .note-claim-row {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 8px;
      padding: 10px 12px;
      border: 1px solid rgba(39, 68, 125, 0.08);
      border-radius: 8px;
      background: #fafbfe;
    }

    .note-claim-status,
    .note-claim-hint {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #65748e;
      font-size: 0.72rem;
      font-weight: 690;
    }

    .note-claim-status {
      color: #18734a;
    }

    .note-claim-status-icon {
      width: 17px;
      height: 17px;
    }

    .note-claim-button {
      min-height: 34px;
      border: 1px solid rgba(77, 87, 255, 0.17);
      border-radius: 7px;
      padding: 7px 10px;
      background: #f3f4ff;
      color: #433cea;
      cursor: pointer;
      font: inherit;
      font-size: 0.71rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .note-claim-button.is-release {
      border-color: rgba(39, 68, 125, 0.12);
      background: #ffffff;
      color: #66758f;
    }

    @media (max-width: 720px) {
      .shift-settings-row {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .shift-settings-panel .team-drawer-head,
      .shift-settings-form {
        padding-left: 16px;
        padding-right: 16px;
      }

      .shift-settings-actions {
        margin-inline: -16px;
        padding-inline: 16px;
      }

      .board-filter-grid.is-shifts {
        grid-template-columns: 1fr;
      }

      .note-claim-row {
        align-items: stretch;
        flex-direction: column;
      }

      .note-claim-button {
        width: 100%;
      }
    }

    body.category-chooser-open #screen-board {
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      transform: none;
    }

    .category-chooser-backdrop {
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      animation-duration: 0.52s;
    }

    .category-chooser-dialog {
      display: grid;
      grid-template-columns: minmax(0, 420px);
      grid-template-rows: auto auto;
      align-content: center;
      justify-content: center;
      justify-items: stretch;
      gap: 14px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(8px);
    }

    .category-chooser-head {
      grid-column: 1;
      display: block;
      padding-right: 42px;
    }

    .category-chooser-kicker,
    .category-slide-copy,
    .category-carousel-arrow,
    .category-chooser-footer {
      display: none !important;
    }

    .category-chooser-title {
      font-size: 1.08rem;
      line-height: 1.25;
      font-weight: 800;
    }

    .category-chooser-text {
      max-width: 330px;
      margin-top: 5px;
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .category-chooser-close {
      top: 18px;
      right: 18px;
      width: 38px;
      height: 38px;
      background: rgba(255, 255, 255, 0.84);
      font-size: 1.2rem;
    }

    #board-category-chooser-form {
      grid-column: 1;
      display: block;
      width: 100%;
    }

    .category-carousel {
      display: block;
    }

    .category-carousel-viewport {
      overflow: visible;
      border-radius: 0;
    }

    .category-carousel-track {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      transform: none !important;
      transition: none;
      will-change: auto;
    }

    .category-slide {
      min-width: 0;
      min-height: 0;
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: center;
      align-content: center;
      justify-items: start;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 14px 34px rgba(15, 35, 75, 0.06);
      backdrop-filter: blur(12px) saturate(112%);
      -webkit-backdrop-filter: blur(12px) saturate(112%);
    }

    .category-slide:hover,
    .category-slide:focus-visible {
      border-color: rgba(77, 87, 255, 0.24);
      background: rgba(255, 255, 255, 0.96);
      transform: translateY(-1px);
    }

    .category-slide.is-selected {
      border-color: rgba(77, 87, 255, 0.34);
      box-shadow: 0 16px 38px rgba(60, 53, 230, 0.09);
      transform: none;
    }

    .category-slide-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(65, 105, 255, 0.08);
      box-shadow: none;
    }

    .category-slide-icon svg {
      width: 18px;
      height: 18px;
    }

    .category-slide-label {
      font-size: 0.96rem;
      line-height: 1.25;
      font-weight: 790;
    }

    #board-category-chooser-error {
      margin: 10px 0 0;
      font-size: 0.82rem;
    }

    @media (max-width: 920px) {
      .category-chooser-dialog {
        grid-template-columns: minmax(0, min(420px, calc(100vw - 36px)));
        grid-template-rows: auto auto auto;
        align-content: center;
        justify-content: center;
        gap: 14px;
        padding: 64px 18px 24px;
      }

      .category-chooser-head {
        padding-right: 34px;
      }

      .category-slide {
        min-height: 0;
        padding: 12px 14px;
      }

      .category-slide-label {
        font-size: 0.95rem;
      }
    }

    @media (max-width: 560px) {
      .category-chooser-title {
        font-size: 1rem;
      }

      .category-chooser-text {
        font-size: 0.82rem;
      }

      .category-slide {
        grid-template-columns: 30px minmax(0, 1fr);
        padding: 11px 12px;
      }

      .category-slide-icon {
        width: 30px;
        height: 30px;
      }

      .category-slide-label {
        font-size: 0.9rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-glow--primary,
      .hero-orb,
      .hero-object-motion,
      .hotel-key-card-wrap,
      .floating-card-motion,
      .startup-showcase,
      .startup-slide,
      .startup-progress span::before {
        animation: none !important;
      }

      .startup-slide:first-child {
        opacity: 1;
        transform: none;
      }

      .login-button,
      .cta-button,
      .form-button,
      .category-chooser-overlay,
      .category-chooser-dialog,
      .category-carousel-track,
      .category-chooser-backdrop {
        transition: none;
        animation: none !important;
      }
    }

    body.about-open {
      overflow: hidden;
    }

    body.about-menu-open {
      overflow: hidden;
    }

    body.about-menu-open::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 90;
      background: rgba(247, 245, 239, 0.22);
      backdrop-filter: blur(5px) saturate(108%);
      -webkit-backdrop-filter: blur(5px) saturate(108%);
      animation: aboutVeilIn 0.68s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    body.about-menu-open .app-shell,
    body.about-menu-open .topbar {
      opacity: 0.48;
      filter: blur(1.4px);
      pointer-events: none;
    }

    .app-shell,
    .topbar {
      transition: opacity 0.68s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.68s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    @keyframes aboutVeilIn {
      0% {
        opacity: 0;
        backdrop-filter: blur(0) saturate(100%);
        -webkit-backdrop-filter: blur(0) saturate(100%);
      }

      100% {
        opacity: 1;
        backdrop-filter: blur(5px) saturate(108%);
        -webkit-backdrop-filter: blur(5px) saturate(108%);
      }
    }

    .about-control {
      position: fixed;
      top: clamp(16px, 2vw, 22px);
      left: clamp(16px, 2.2vw, 28px);
      z-index: 120;
    }

    .about-trigger {
      width: 58px;
      height: 42px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #10254a;
      box-shadow: none;
      cursor: pointer;
      transition: transform 0.22s ease;
    }

    .about-trigger:hover,
    .about-trigger:focus-visible {
      transform: translateY(-2px);
    }

    .about-trigger:focus-visible,
    .about-menu-item:focus-visible,
    .about-suggestion-card:focus-visible,
    .about-close:focus-visible,
    .about-email:focus-visible {
      outline: 3px solid rgba(65, 105, 255, 0.2);
      outline-offset: 3px;
    }

    .about-trigger-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #10254a;
      opacity: 0.82;
      box-shadow: 0 8px 18px rgba(16, 37, 74, 0.18);
      transition: transform 0.22s ease, opacity 0.22s ease;
    }

    .about-trigger:hover .about-trigger-dot,
    .about-trigger:focus-visible .about-trigger-dot,
    .about-control.is-menu-open .about-trigger-dot {
      opacity: 1;
      transform: translateY(-1px);
    }

    .about-control.is-menu-open .about-trigger-dot:nth-child(2) {
      transform: translateY(-4px);
      background: var(--accent-bottom);
    }

    .about-menu {
      position: fixed;
      left: 50%;
      top: 50%;
      width: min(420px, calc(100vw - 36px));
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      display: grid;
      justify-items: center;
      gap: 14px;
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, -44%) scale(0.92);
      transform-origin: center;
      pointer-events: none;
      transition: opacity 0.46s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.46s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.46s ease;
    }

    .about-control.is-menu-open .about-menu {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: auto;
    }

    .about-menu-item {
      width: 100%;
      padding: 0;
      display: grid;
      justify-items: center;
      gap: 15px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #10254a;
      font: inherit;
      text-align: center;
      box-shadow: none;
      cursor: pointer;
      transition: transform 0.26s ease;
    }

    .about-menu-item:hover,
    .about-menu-item:focus-visible {
      background: transparent;
      transform: translateY(-3px);
    }

    .about-menu-icon {
      width: clamp(156px, 18vw, 190px);
      height: clamp(174px, 20vw, 212px);
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      background: transparent;
      color: var(--accent-bottom);
      filter: drop-shadow(0 24px 36px rgba(28, 53, 108, 0.18));
      animation: aboutBotFloat 4.6s ease-in-out infinite;
    }

    .about-menu-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .about-menu-label {
      max-width: 320px;
      padding: 13px 18px;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.86);
      color: #10254a;
      box-shadow: 0 18px 48px rgba(15, 35, 75, 0.11);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      font-size: clamp(0.96rem, 1.5vw, 1.08rem);
      line-height: 1.25;
      font-weight: 760;
    }

    .about-suggestion-card {
      width: min(100%, 320px);
      padding: 13px 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(120, 140, 180, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.86);
      color: #10254a;
      font: inherit;
      box-shadow: 0 18px 48px rgba(15, 35, 75, 0.11);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.26s ease, background 0.26s ease, box-shadow 0.26s ease;
    }

    .about-suggestion-card:hover {
      transform: translateY(-3px);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 22px 54px rgba(15, 35, 75, 0.15);
    }

    .about-suggestion-title {
      color: #10254a;
      font-size: clamp(0.96rem, 1.5vw, 1.08rem);
      line-height: 1.25;
      font-weight: 760;
      letter-spacing: 0;
    }

    @keyframes aboutBotFloat {
      0%,
      100% {
        transform: translateY(0) rotate(-1deg);
      }

      50% {
        transform: translateY(-10px) rotate(1deg);
      }
    }

    .about-email svg,
    .about-close svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .about-overlay {
      position: fixed;
      inset: 0;
      z-index: 110;
      display: grid;
      place-items: center;
      padding: clamp(78px, 9vh, 112px) clamp(22px, 5vw, 72px) clamp(32px, 6vh, 64px);
      overflow-y: auto;
      overscroll-behavior: contain;
      opacity: 0;
      transition: opacity 0.26s ease;
    }

    .about-overlay[hidden] {
      display: none;
    }

    .about-overlay.is-open {
      opacity: 1;
    }

    .about-overlay-backdrop {
      position: fixed;
      inset: 0;
      border: 0;
      background: rgba(248, 246, 241, 0.5);
      backdrop-filter: blur(24px) saturate(115%);
      -webkit-backdrop-filter: blur(24px) saturate(115%);
      cursor: default;
    }

    .about-dialog {
      position: relative;
      z-index: 1;
      width: min(880px, 100%);
      padding: clamp(26px, 4vw, 42px);
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 28px;
      background:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.76), transparent 34%),
        rgba(255, 255, 255, 0.64);
      box-shadow: 0 32px 90px rgba(15, 35, 75, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(18px) saturate(125%);
      -webkit-backdrop-filter: blur(18px) saturate(125%);
      color: #10254a;
      opacity: 0;
      transform: translateY(14px) scale(0.985);
      transition: opacity 0.26s ease, transform 0.26s ease;
    }

    .about-dialog:focus {
      outline: none;
    }

    .about-overlay.is-open .about-dialog {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .about-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 42px;
      height: 42px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(120, 140, 180, 0.14);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.62);
      color: rgba(16, 37, 74, 0.7);
      box-shadow: 0 12px 28px rgba(15, 35, 75, 0.06);
      cursor: pointer;
      transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
    }

    .about-close:hover {
      transform: translateY(-1px);
      color: #10254a;
      background: rgba(255, 255, 255, 0.94);
    }

    .about-heading {
      display: grid;
      grid-template-columns: clamp(104px, 11vw, 124px) minmax(0, 1fr);
      align-items: center;
      gap: clamp(22px, 4vw, 38px);
      padding-right: 54px;
    }

    .about-avatar {
      position: relative;
      width: clamp(104px, 11vw, 124px);
      aspect-ratio: 1;
      overflow: hidden;
      display: grid;
      place-items: center;
      border: 5px solid rgba(255, 255, 255, 0.76);
      border-radius: 999px;
      background:
        radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.72), transparent 28%),
        linear-gradient(145deg, #789cff, #263f82 72%, #10254a);
      color: #ffffff;
      box-shadow: 0 22px 50px rgba(31, 67, 140, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }

    .about-avatar-fallback {
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(3.4rem, 6vw, 4.8rem);
      line-height: 1;
      font-weight: 700;
      text-shadow: 0 12px 28px rgba(7, 25, 54, 0.2);
    }

    .about-heading-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .about-eyebrow {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      margin: 0 0 clamp(18px, 2vw, 24px);
      padding: 6px 10px 5px;
      border: 1px solid rgba(65, 105, 255, 0.13);
      border-radius: 8px;
      background: rgba(65, 105, 255, 0.07);
      color: #4169ff;
      font-size: 0.74rem;
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0;
    }

    .about-title {
      max-width: 640px;
      margin: 0;
      color: #10254a;
      font-family: inherit;
      font-size: clamp(2.35rem, 4.8vw, 4.1rem);
      line-height: 1.02;
      font-weight: 760;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .about-subtitle {
      margin: 14px 0 0;
      color: rgba(16, 37, 74, 0.62);
      font-size: clamp(1rem, 1.45vw, 1.16rem);
      line-height: 1.4;
      font-weight: 600;
    }

    .about-copy {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(24px, 5vw, 48px);
      margin-top: clamp(26px, 4vw, 36px);
      padding-top: clamp(22px, 3vw, 28px);
      border-top: 1px solid rgba(120, 140, 180, 0.15);
    }

    .about-column {
      display: grid;
      align-content: start;
      gap: 14px;
    }

    .about-column p {
      margin: 0;
      color: rgba(16, 37, 74, 0.78);
      font-size: clamp(0.96rem, 1.2vw, 1.05rem);
      line-height: 1.72;
      font-weight: 500;
    }

    .about-column .about-intro {
      color: #10254a;
      font-family: inherit;
      font-size: clamp(1.12rem, 1.55vw, 1.34rem);
      line-height: 1.36;
      font-weight: 760;
    }

    .about-footer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-top: clamp(26px, 4vw, 38px);
    }

    .about-email {
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 11px 18px;
      border: 1px solid rgba(120, 140, 180, 0.18);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.68);
      color: #3157d5;
      font-size: 0.94rem;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 12px 28px rgba(15, 35, 75, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .about-email:hover {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 16px 34px rgba(15, 35, 75, 0.09);
    }

    .about-signature {
      display: grid;
      justify-items: end;
      gap: 2px;
      color: rgba(16, 37, 74, 0.6);
      font-size: 0.9rem;
      line-height: 1.35;
    }

    .about-signature strong {
      color: #10254a;
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: 2rem;
      font-style: italic;
      font-weight: 700;
    }

    .legal-footer {
      position: fixed;
      left: 50%;
      bottom: clamp(10px, 1.8vw, 18px);
      z-index: 30;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: max-content;
      max-width: calc(100vw - 32px);
      padding: 8px 12px;
      border: 1px solid rgba(120, 140, 180, 0.14);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      color: rgba(16, 37, 74, 0.58);
      box-shadow: 0 12px 28px rgba(15, 35, 75, 0.06);
      backdrop-filter: blur(16px) saturate(130%);
      -webkit-backdrop-filter: blur(16px) saturate(130%);
      transform: translateX(-50%);
      font-size: 0.78rem;
      line-height: 1;
    }

    body.is-home-screen .legal-footer {
      display: flex;
    }

    .legal-footer button {
      border: 0;
      padding: 0;
      background: transparent;
      color: rgba(16, 37, 74, 0.68);
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.2s ease;
    }

    .legal-footer button:hover,
    .legal-footer button:focus-visible {
      color: var(--accent-bottom);
    }

    .legal-dialog {
      width: min(920px, 100%);
    }

    .legal-copy {
      display: grid;
      gap: 18px;
      margin-top: clamp(26px, 4vw, 36px);
      padding-top: clamp(22px, 3vw, 28px);
      border-top: 1px solid rgba(120, 140, 180, 0.15);
      text-align: left;
    }

    .legal-section {
      display: grid;
      gap: 8px;
    }

    .legal-section h3 {
      margin: 0;
      color: #10254a;
      font-size: 1rem;
      line-height: 1.35;
    }

    .legal-section p,
    .legal-section li {
      margin: 0;
      color: rgba(16, 37, 74, 0.76);
      font-size: 0.96rem;
      line-height: 1.65;
    }

    .legal-section ul {
      margin: 0;
      padding-left: 20px;
    }

    .legal-note {
      padding: 13px 15px;
      border: 1px solid rgba(65, 105, 255, 0.16);
      border-radius: 16px;
      background: rgba(65, 105, 255, 0.07);
      color: #31476f;
      font-size: 0.92rem;
      line-height: 1.55;
    }

    @media (max-width: 760px) {
      .about-overlay {
        place-items: start center;
        padding: 82px 14px 22px;
      }

      .about-dialog {
        padding: 28px 20px 26px;
        border-radius: 28px;
      }

      .about-menu {
        width: min(360px, calc(100vw - 28px));
        gap: 18px;
      }

      .about-close {
        top: 14px;
        right: 14px;
      }

      .about-heading {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
        padding-right: 0;
        text-align: center;
      }

      .about-heading-copy {
        align-items: center;
      }

      .about-eyebrow {
        margin-bottom: 30px;
      }

      .about-avatar {
        width: 108px;
      }

      .about-title {
        font-size: clamp(3rem, 14vw, 4.2rem);
      }

      .about-subtitle {
        margin-top: 12px;
      }

      .about-copy {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .about-footer {
        align-items: stretch;
        flex-direction: column;
      }

      .about-email {
        justify-content: center;
        overflow-wrap: anywhere;
        text-align: center;
      }

      .about-signature {
        justify-items: start;
      }

      .legal-footer {
        bottom: 8px;
        gap: 5px;
        padding: 7px 10px;
        font-size: 0.7rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .about-trigger,
      .about-menu,
      .about-menu-item,
      .about-menu-icon,
      .about-suggestion-card,
      .about-overlay,
      .about-dialog,
      .about-close,
      .about-email {
        transition: none !important;
        animation: none !important;
      }

      body.about-menu-open::before {
        animation: none !important;
      }
    }

    /* Shared premium note flow */
    .category-chooser-dialog {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(14px, 3vw, 32px);
      background: rgba(255, 255, 255, 0.08) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body.category-chooser-open #screen-board {
      opacity: 0.74 !important;
      filter: blur(1.2px) saturate(102%) !important;
      -webkit-filter: blur(1.2px) saturate(102%) !important;
      transform: none !important;
      visibility: visible !important;
    }

    .category-chooser-overlay {
      background: transparent !important;
      transition: opacity 0.36s ease !important;
    }

    .category-chooser-backdrop {
      background: rgba(247, 245, 239, 0.18) !important;
      backdrop-filter: blur(1.4px) saturate(102%) !important;
      -webkit-backdrop-filter: blur(1.4px) saturate(102%) !important;
      animation: categoryVeilIn 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
    }

    .category-chooser-shell {
      position: relative;
      width: min(720px, calc(100vw - 36px));
      max-height: calc(100dvh - 36px);
      overflow-y: auto;
      padding: clamp(28px, 4vw, 42px);
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      scrollbar-width: thin;
    }

    .category-chooser-head {
      display: block;
      padding: 0 42px 0 0;
      text-align: center;
    }

    .category-chooser-kicker {
      display: none;
    }

    .category-chooser-title {
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
    }

    .category-chooser-text {
      max-width: 470px;
      margin: 7px auto 24px;
      font-size: 0.92rem;
      line-height: 1.5;
    }

    .category-chooser-close {
      top: 16px;
      right: 16px;
      width: 38px;
      height: 38px;
      background: #ffffff;
    }

    #board-category-chooser-form,
    .category-carousel,
    .category-carousel-viewport {
      display: block;
      width: 100%;
    }

    .category-carousel-viewport {
      overflow: visible;
    }

    .category-carousel-track {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      transform: none !important;
      transition: none;
    }

    .category-slide {
      min-width: 0;
      min-height: 112px;
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      align-content: center;
      align-items: center;
      justify-items: start;
      gap: 5px 12px;
      padding: 16px;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .category-slide:hover,
    .category-slide:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.28);
      background: #fafbff;
      box-shadow: 0 12px 26px rgba(23, 43, 82, 0.07);
    }

    .category-slide-icon {
      grid-row: 1 / span 2;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(65, 105, 255, 0.08);
      box-shadow: none;
    }

    .category-slide-label {
      font-size: 0.96rem;
      line-height: 1.25;
      font-weight: 790;
    }

    .category-slide-copy {
      grid-column: 2;
      display: block !important;
      max-width: none;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.35;
    }

    .category-carousel-arrow,
    .category-chooser-footer {
      display: none !important;
    }

    body.note-flow-modal-open {
      overflow: hidden;
    }

    body.note-flow-modal-open #screen-board {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 0;
      width: 100vw;
      max-width: none;
      height: 100dvh;
      margin: 0;
      padding: clamp(18px, 3vw, 32px);
      opacity: 0.78;
      filter: blur(2px) saturate(96%);
      transform: none;
      pointer-events: none;
      overflow: hidden;
    }

    body.note-flow-modal-open .note-flow-screen.is-active {
      position: fixed;
      inset: 0;
      z-index: 2;
      width: 100vw;
      max-width: none;
      height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: clamp(18px, 4vw, 44px);
      overflow-y: auto;
      background: rgba(247, 249, 253, 0.42);
      backdrop-filter: blur(1.6px) saturate(98%);
      -webkit-backdrop-filter: blur(1.6px) saturate(98%);
    }

    .note-flow-shell {
      display: contents;
    }

    body.note-flow-modal-open .note-flow-screen.is-active .note-flow-shell {
      display: block;
      width: min(690px, calc(100vw - 36px));
      max-height: calc(100dvh - 36px);
      overflow-y: auto;
      padding: clamp(26px, 4vw, 42px);
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      scrollbar-width: thin;
    }

    body.note-flow-modal-open .note-flow-screen.is-active .note-flow-shell.is-wide {
      width: min(790px, calc(100vw - 36px));
    }

    body.note-flow-modal-open .note-flow-screen.is-active .note-flow-shell.is-compact {
      width: min(560px, calc(100vw - 36px));
    }

    body.note-flow-modal-open .note-flow-screen.is-active .flow-logo,
    body.note-flow-modal-open #screen-note-date.is-active .logo {
      display: none;
    }

    .note-flow-progress {
      width: min(210px, 46vw);
      margin: 0 auto 24px;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: 7px;
    }

    .note-flow-progress span {
      height: 3px;
      border-radius: 999px;
      background: rgba(59, 76, 116, 0.14);
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .note-flow-progress span.is-complete,
    .note-flow-progress span.is-current {
      background: var(--accent-bottom);
    }

    .note-flow-progress span.is-current {
      transform: scaleY(1.35);
    }

    body.note-flow-modal-open .note-flow-screen.is-active .form-title {
      width: 100%;
      margin-bottom: 7px;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
      text-align: center;
    }

    body.note-flow-modal-open .note-flow-screen.is-active .form-text {
      width: 100%;
      max-width: 500px;
      margin: 0 auto 24px;
      font-size: 0.94rem;
      line-height: 1.55;
      text-align: center;
    }

    body.note-flow-modal-open .note-flow-screen.is-active form {
      width: 100%;
      max-width: none;
      margin: 0;
    }

    body.note-flow-modal-open .note-flow-screen.is-active .data-guard {
      width: 100%;
      margin-bottom: 18px;
      padding: 12px 14px;
      border-color: rgba(67, 83, 140, 0.12);
      background: #f7f8fc;
      box-shadow: none;
    }

    body.note-flow-modal-open .note-flow-screen.is-active .field,
    body.note-flow-modal-open .note-flow-screen.is-active .field-grid {
      width: 100%;
      max-width: none;
    }

    body.note-flow-modal-open .note-flow-screen.is-active .field-input {
      border-radius: 8px;
      background: #ffffff;
    }

    .note-flow-step {
      animation: generalNoteStepIn 220ms ease both;
    }

    #screen-note.is-checkout-note .general-note-step {
      width: 100%;
      animation: generalNoteStepIn 220ms ease both;
    }

    #screen-note.is-checkout-note .field {
      margin-bottom: 0;
    }

    #screen-note.is-checkout-note .field-textarea {
      min-height: 190px;
    }

    #screen-note.is-checkout-note .priority-stack {
      width: 100%;
      max-width: none;
      grid-template-columns: 1fr;
      gap: 0;
      overflow: hidden;
      margin-bottom: 0;
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: #ffffff;
    }

    #screen-note.is-checkout-note .priority-row {
      min-height: 76px;
      padding: 15px 17px;
      border: 0;
      border-bottom: 1px solid rgba(26, 51, 96, 0.09);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    #screen-note.is-checkout-note .priority-row:last-child {
      border-bottom: 0;
    }

    #screen-note-taxi .taxi-step,
    #screen-note-group [data-group-panel] {
      display: none;
    }

    #screen-note-taxi[data-taxi-step="guest"] [data-taxi-panel="guest"],
    #screen-note-taxi[data-taxi-step="route"] [data-taxi-panel="route"],
    #screen-note-taxi[data-taxi-step="details"] [data-taxi-panel="details"],
    #screen-note-group[data-group-step="arrival"] [data-group-panel="arrival"],
    #screen-note-group[data-group-step="checkin"] [data-group-panel="checkin"],
    #screen-note-group[data-group-step="departure"] [data-group-panel="departure"],
    #screen-note-group[data-group-step="checkout"] [data-group-panel="checkout"] {
      display: block;
    }

    #screen-note-group:not([data-group-step="arrival"]) .group-data-guard {
      display: none;
    }

    #screen-note-taxi .taxi-step .field:last-child,
    #screen-note-taxi .taxi-step .field-grid:last-child {
      margin-bottom: 0;
    }

    #screen-note-group .group-note-form {
      display: block;
      width: 100%;
    }

    #screen-note-group .group-form-card {
      gap: 15px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    #screen-note-group .group-form-card-head {
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(26, 51, 96, 0.09);
    }

    #screen-note-group .group-choice-pill,
    #screen-note-group .group-check-row {
      border-radius: 8px;
      background: #ffffff;
    }

    #screen-note-group .group-checkout-grid {
      display: grid;
      grid-template-columns: 1fr;
    }

    #screen-note-issue .issue-grid,
    #screen-note-resolution .resolution-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      max-width: none;
    }

    #screen-note-issue .issue-pill,
    #screen-note-resolution .resolution-pill {
      min-height: 48px;
      padding: 11px 13px;
      border-radius: 8px;
      background: #ffffff;
      text-align: left;
      line-height: 1.3;
    }

    #screen-note-issue .pill-creator,
    #screen-note-resolution .pill-creator {
      max-width: none;
    }

    .note-flow-actions,
    body.note-flow-modal-open .note-flow-screen.is-active .form-actions {
      margin-top: 12px;
      padding-top: 18px;
      border-top: 1px solid rgba(26, 51, 96, 0.09);
      justify-content: space-between;
      flex-wrap: nowrap;
    }

    body.note-flow-modal-open .note-flow-screen.is-active .form-actions .form-button {
      min-width: 200px;
    }

    body.note-flow-modal-open #screen-note-group.is-active .note-flow-shell.is-wide {
      padding-top: 28px;
      padding-bottom: 26px;
    }

    #screen-note-group .note-flow-progress {
      margin-bottom: 16px;
    }

    body.note-flow-modal-open #screen-note-group.is-active .form-text {
      margin-bottom: 16px;
    }

    body.note-flow-modal-open #screen-note-group.is-active .data-guard {
      margin-bottom: 12px;
      padding: 10px 13px;
      font-size: 0.82rem;
    }

    #screen-note-group .group-form-card .field,
    #screen-note-group .group-form-card .field-grid {
      margin-bottom: 12px;
    }

    #screen-note-group .group-form-card .field-input {
      padding-top: 14px;
      padding-bottom: 14px;
    }

    #screen-note-group .note-flow-actions {
      padding-top: 12px;
    }

    /* Premium operational notebook */
    .notes-list {
      gap: 30px;
      margin-top: 28px;
    }

    .notes-category-group,
    .notes-category-group.is-general-instructions,
    .notes-category-group.is-sensitive-situations,
    .notes-category-group.is-taxi-transfers,
    .notes-category-group.is-group-arrivals {
      --note-accent: #4d57ff;
      display: grid;
      gap: 12px;
      padding: 0 0 28px;
      border: 0;
      border-bottom: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .notes-category-group.is-sensitive-situations {
      --note-accent: #c84d5c;
    }

    .notes-category-group.is-taxi-transfers {
      --note-accent: #237f9e;
    }

    .notes-category-group.is-group-arrivals {
      --note-accent: #2f8a68;
    }

    .notes-category-group:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .notes-category-title,
    .notes-category-group.is-general-instructions .notes-category-title,
    .notes-category-group.is-sensitive-situations .notes-category-title,
    .notes-category-group.is-group-arrivals .notes-category-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      padding: 0 2px 11px;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
      color: var(--ink);
    }

    .notes-category-title-main {
      gap: 9px;
      color: var(--ink);
      font-size: 0.98rem;
      font-weight: 820;
      letter-spacing: 0;
      text-transform: none;
    }

    .notes-category-title-icon,
    .notes-category-title-icon.is-sensitive,
    .notes-category-title-icon.is-group,
    .notes-category-title-icon.is-taxi {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      color: var(--note-accent);
      background: color-mix(in srgb, var(--note-accent) 9%, white);
      border-color: color-mix(in srgb, var(--note-accent) 16%, white);
      box-shadow: none;
    }

    .notes-category-subtitle {
      color: #73809a;
      font-size: 0.76rem;
      font-weight: 650;
      line-height: 1.35;
    }

    .notes-category-count {
      min-width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      padding: 0 8px;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 999px;
      background: #ffffff;
      color: #52617c;
      font-size: 0.72rem;
      font-weight: 800;
    }

    .note-item,
    .note-item.is-general-instruction,
    .note-item.is-sensitive-situation,
    .note-item.is-taxi-transfer,
    .note-item.is-group-arrival {
      --card-accent: #4d57ff;
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      padding: 18px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 10px 28px rgba(23, 43, 82, 0.055);
      line-height: 1.5;
      white-space: normal;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .note-item.is-sensitive-situation {
      --card-accent: #c84d5c;
    }

    .note-item.is-taxi-transfer {
      --card-accent: #237f9e;
    }

    .note-item.is-group-arrival {
      --card-accent: #2f8a68;
    }

    .note-item::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: var(--card-accent);
      opacity: 0.82;
    }

    .note-item:hover,
    .note-item.is-general-instruction:hover,
    .note-item.is-sensitive-situation:hover,
    .note-item.is-taxi-transfer:hover,
    .note-item.is-group-arrival:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--card-accent) 24%, white);
      box-shadow: 0 15px 34px rgba(23, 43, 82, 0.075);
    }

    .note-item.is-unread {
      border-color: color-mix(in srgb, var(--card-accent) 30%, white);
      box-shadow: 0 12px 30px color-mix(in srgb, var(--card-accent) 9%, transparent);
    }

    .note-item.is-done,
    .note-item.is-general-instruction.is-done,
    .note-item.is-sensitive-situation.is-done,
    .note-item.is-taxi-transfer.is-done,
    .note-item.is-group-arrival.is-done {
      --card-accent: #2f8a68;
      border-color: rgba(47, 138, 104, 0.2);
      background: #fbfefc;
    }

    .note-item .note-item-head,
    .note-item.is-general-instruction .note-item-head,
    .note-item.is-sensitive-situation .note-item-head,
    .note-item.is-taxi-transfer .note-item-head,
    .note-item.is-group-arrival .note-item-head {
      grid-column: 1;
      grid-row: auto;
      align-self: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0;
      padding: 0 0 12px;
      border: 0;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
    }

    .note-meta {
      gap: 8px;
      min-width: 0;
    }

    .note-card-heading,
    .note-sensitive-heading,
    .note-taxi-heading,
    .note-group-heading {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--ink);
      font-size: 0.84rem;
      font-weight: 820;
      letter-spacing: 0;
      line-height: 1.25;
      text-transform: none;
      white-space: nowrap;
    }

    .note-card-heading-icon,
    .note-sensitive-heading-icon,
    .note-taxi-heading-icon,
    .note-group-heading-icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid color-mix(in srgb, var(--card-accent) 16%, white);
      border-radius: 8px;
      background: color-mix(in srgb, var(--card-accent) 9%, white);
      color: var(--card-accent);
      box-shadow: none;
    }

    .note-actions,
    .note-item.is-general-instruction .note-actions,
    .note-item.is-sensitive-situation .note-actions,
    .note-item.is-taxi-transfer .note-actions,
    .note-item.is-group-arrival .note-actions {
      width: auto;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      padding: 0;
      border: 0;
      flex-wrap: nowrap;
    }

    .note-item.is-general-instruction .note-done,
    .note-item.is-sensitive-situation .note-done,
    .note-item.is-taxi-transfer .note-done,
    .note-item.is-group-arrival .note-done {
      min-height: 36px;
      padding: 7px 10px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 7px;
      background: #f8f9fc;
      color: #52617c;
      font-size: 0.78rem;
      font-weight: 750;
      box-shadow: none;
    }

    .note-item.is-general-instruction .note-archive,
    .note-item.is-sensitive-situation .note-archive,
    .note-item.is-taxi-transfer .note-archive,
    .note-item.is-group-arrival .note-archive {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 7px;
      background: #ffffff;
      color: #6e7a91;
      box-shadow: none;
    }

    .note-general-body {
      grid-column: 1;
      grid-row: auto;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 13px;
    }

    .note-general-card-icon {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      box-shadow: none;
    }

    .note-general-badge {
      font-size: 0.68rem;
      letter-spacing: 0;
      text-transform: none;
    }

    .note-item.is-general-instruction .note-content,
    .note-item.is-sensitive-situation .note-content {
      font-size: 0.98rem;
      line-height: 1.55;
    }

    .note-sensitive-info-card,
    .note-sensitive-solutions,
    .note-sensitive-solution-card,
    .note-sensitive-description,
    .note-taxi-meta-item,
    .note-taxi-route,
    .note-group-summary,
    .note-group-section,
    .note-group-detail-card,
    .note-group-note {
      border-radius: 8px;
      box-shadow: none;
    }

    .note-sensitive-info-card,
    .note-sensitive-solutions,
    .note-sensitive-description,
    .note-taxi-meta-item,
    .note-taxi-route,
    .note-group-summary,
    .note-group-section {
      border-color: rgba(39, 68, 125, 0.1);
      background: #fafbfe;
    }

    .note-taxi-route,
    .note-sensitive-solutions,
    .note-sensitive-description,
    .note-group-summary,
    .note-group-section {
      padding: 15px;
    }

    .note-priority-badge,
    .note-status-badge,
    .note-group-phase-badge {
      padding: 6px 9px;
      border-radius: 999px;
      font-size: 0.72rem;
      letter-spacing: 0;
      text-transform: none;
      box-shadow: none;
    }

    .note-receipt-row {
      margin-top: 0;
      padding-top: 11px;
      border-top-color: rgba(39, 68, 125, 0.09);
    }

    .note-author {
      margin: -5px 0 0;
      padding-top: 0;
      border-top: 0;
      font-size: 0.72rem;
    }

    /* Filter flow aligned with note creation */
    body.board-filter-open {
      overflow: hidden;
    }

    body.board-filter-open #screen-board {
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      -webkit-filter: blur(1.2px) saturate(102%);
      transform: none;
      pointer-events: none;
    }

    .board-filter-modal {
      z-index: 120;
      padding: clamp(14px, 3vw, 32px);
    }

    .board-filter-modal-backdrop {
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      animation: categoryVeilIn 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      transition: none;
    }

    .board-filter-modal-panel {
      width: min(720px, calc(100vw - 36px));
      max-height: calc(100dvh - 36px);
      padding: clamp(28px, 4vw, 42px);
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      transform: translateY(8px);
      transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .board-filter-modal.is-open .board-filter-modal-panel {
      transform: translateY(0);
    }

    .board-filter-close-icon {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      color: #52617c;
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
    }

    .board-filter-modal-head {
      display: block;
      margin: 0;
      padding: 0 42px;
      text-align: center;
    }

    .board-filter-modal-title {
      margin: 0;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
    }

    .board-filter-modal-text {
      max-width: 470px;
      margin: 7px auto 24px;
      font-size: 0.92rem;
      line-height: 1.5;
    }

    .board-filter-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      max-height: none;
      margin: 0;
      padding: 0;
      overflow: visible;
    }

    .board-filter-option {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 22px;
      align-items: center;
      gap: 12px;
      min-height: 82px;
      padding: 14px 15px;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: none;
    }

    .board-filter-option:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.24);
      background: #fafbff;
      box-shadow: 0 12px 26px rgba(23, 43, 82, 0.07);
    }

    .board-filter-option.is-selected {
      border-color: rgba(77, 87, 255, 0.28);
      background: rgba(77, 87, 255, 0.065);
      box-shadow: none;
    }

    .board-filter-option-icon {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(65, 105, 255, 0.12);
      border-radius: 8px;
      background: rgba(65, 105, 255, 0.08);
      color: #4169ff;
    }

    .board-filter-option-icon.is-sensitive {
      border-color: rgba(200, 68, 68, 0.14);
      background: rgba(200, 68, 68, 0.08);
      color: #c84444;
    }

    .board-filter-option-icon.is-taxi {
      border-color: rgba(35, 127, 158, 0.14);
      background: rgba(35, 127, 158, 0.08);
      color: #237f9e;
    }

    .board-filter-option-icon.is-group {
      border-color: rgba(47, 138, 104, 0.14);
      background: rgba(47, 138, 104, 0.08);
      color: #2f8a68;
    }

    .board-filter-option-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .board-filter-option-text {
      font-size: 0.92rem;
      line-height: 1.3;
      font-weight: 780;
    }

    .board-filter-option-mark {
      width: 22px;
      height: 22px;
      border-radius: 7px;
      box-shadow: none;
    }

    .board-filter-actions {
      justify-content: space-between;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(26, 51, 96, 0.09);
      flex-wrap: nowrap;
    }

    .board-filter-secondary-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .board-filter-reset {
      border: 0;
      border-radius: 0;
      padding: 0;
      background: transparent;
      color: #5d7097;
      font-size: 0.9rem;
      font-weight: 650;
    }

    .board-filter-actions .form-button {
      min-width: 200px;
    }

    /* Archive workspace aligned with note creation */
    body.archive-mode-open {
      overflow: hidden;
    }

    body.archive-mode-open #screen-board .board-header {
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      -webkit-filter: blur(1.2px) saturate(102%);
      pointer-events: none;
      transition: opacity 0.52s ease, filter 0.52s ease;
    }

    body.archive-mode-open #screen-board .board-body {
      position: fixed;
      inset: 0;
      z-index: 93;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(14px, 3vw, 32px);
      overflow: hidden;
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      animation: categoryVeilIn 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    body.archive-mode-open #screen-board .board-panel {
      width: min(920px, calc(100vw - 36px));
      max-width: none;
      max-height: calc(100dvh - 36px);
      margin: 0;
      padding: clamp(28px, 4vw, 42px);
      overflow-y: auto;
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      scrollbar-width: thin;
    }

    body.archive-mode-open #screen-board .board-panel-head {
      flex-direction: column;
      align-items: center;
      gap: 18px;
      text-align: center;
    }

    body.archive-mode-open #screen-board .board-panel-copy {
      width: 100%;
    }

    body.archive-mode-open #screen-board .board-panel-title {
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
    }

    body.archive-mode-open #screen-board .board-panel-text {
      max-width: 470px;
      margin: 7px auto 0;
      font-size: 0.92rem;
      line-height: 1.5;
    }

    body.archive-mode-open #screen-board .board-panel-actions {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }

    .archive-date-wrap {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #52617c;
      font-size: 0.78rem;
      font-weight: 750;
    }

    .archive-date-wrap[hidden] {
      display: none;
    }

    .archive-date-input {
      min-height: 44px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      padding: 9px 12px;
      background: #f8f9fc;
      color: var(--ink);
      font: inherit;
      font-size: 0.86rem;
      outline: none;
    }

    .archive-date-input:focus {
      border-color: rgba(77, 87, 255, 0.34);
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.08);
    }

    body.archive-mode-open #screen-board .board-return-button {
      display: inline-flex;
      min-height: 44px;
      border-radius: 8px;
      background: #ffffff;
    }

    body.archive-mode-open #screen-board .board-search-row {
      margin-top: 22px;
    }

    /* Pre-check-in flow aligned with note creation */
    body.precheckin-choice-open,
    body.precheckin-flow-open {
      overflow: hidden;
    }

    body.precheckin-flow-open #screen-board {
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      -webkit-filter: blur(1.2px) saturate(102%);
      pointer-events: none;
    }

    .precheckin-menu {
      position: fixed;
      inset: 0;
      z-index: 121;
      width: auto;
      padding: clamp(14px, 3vw, 32px);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      opacity: 0;
      transform: none;
      pointer-events: none;
      transition: opacity 0.34s ease;
    }

    .precheckin-menu[hidden] {
      display: none;
    }

    .precheckin-menu.is-open {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    .precheckin-menu-backdrop {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      padding: 0;
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      cursor: default;
    }

    .precheckin-menu-panel {
      position: relative;
      z-index: 1;
      width: min(680px, calc(100vw - 36px));
      max-height: calc(100dvh - 36px);
      overflow-y: auto;
      padding: clamp(28px, 4vw, 42px);
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
      scrollbar-width: thin;
    }

    .precheckin-menu.is-open .precheckin-menu-panel {
      opacity: 1;
      transform: translateY(0);
    }

    .precheckin-menu-close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      color: #52617c;
      font: inherit;
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
    }

    .precheckin-menu-head {
      padding: 0 42px;
      text-align: center;
    }

    .precheckin-menu-head h3 {
      margin: 0;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
    }

    .precheckin-menu-head p {
      margin: 7px auto 24px;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.5;
    }

    .precheckin-menu-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .precheckin-menu-button {
      min-height: 96px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 13px;
      padding: 16px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: none;
    }

    .precheckin-menu-button:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.24);
      background: #fafbff;
      box-shadow: 0 12px 26px rgba(23, 43, 82, 0.07);
    }

    .precheckin-menu-icon {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      box-shadow: none;
    }

    .precheckin-menu-copy {
      gap: 4px;
    }

    .precheckin-menu-copy strong {
      font-size: 0.94rem;
      line-height: 1.3;
    }

    .precheckin-menu-copy span {
      font-size: 0.78rem;
      line-height: 1.4;
      font-weight: 600;
    }

    #precheckin-register-modal,
    #precheckin-list-modal {
      z-index: 122;
      padding: clamp(14px, 3vw, 32px);
    }

    #precheckin-register-modal .precheckin-modal-backdrop,
    #precheckin-list-modal .precheckin-modal-backdrop {
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      transition: opacity 0.34s ease;
    }

    #precheckin-register-modal .precheckin-modal-panel,
    #precheckin-list-modal .precheckin-modal-panel {
      width: min(720px, calc(100vw - 36px));
      max-height: calc(100dvh - 36px);
      padding: clamp(28px, 4vw, 42px);
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      transform: translateY(8px);
      transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
      scrollbar-width: thin;
    }

    #precheckin-list-modal .precheckin-modal-panel {
      width: min(820px, calc(100vw - 36px));
    }

    #precheckin-register-modal.is-open .precheckin-modal-panel,
    #precheckin-list-modal.is-open .precheckin-modal-panel {
      transform: translateY(0);
    }

    #precheckin-register-modal .precheckin-modal-head,
    #precheckin-list-modal .precheckin-modal-head {
      display: block;
      margin: 0 0 24px;
      text-align: center;
    }

    #precheckin-register-modal .precheckin-modal-head-icon,
    #precheckin-list-modal .precheckin-modal-head-icon {
      width: 38px;
      height: 38px;
      margin: 0 auto 12px;
      border-radius: 8px;
      box-shadow: none;
    }

    #precheckin-register-modal .precheckin-modal-head-icon svg,
    #precheckin-list-modal .precheckin-modal-head-icon svg {
      width: 18px;
      height: 18px;
    }

    #precheckin-register-modal .precheckin-modal-title,
    #precheckin-list-modal .precheckin-modal-title {
      margin: 0;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
    }

    #precheckin-register-modal .precheckin-modal-text,
    #precheckin-list-modal .precheckin-modal-text {
      max-width: 470px;
      margin: 7px auto 0;
      font-size: 0.92rem;
      line-height: 1.5;
    }

    #precheckin-register-modal .precheckin-form-grid {
      gap: 14px;
      margin: 0;
    }

    #precheckin-register-modal .precheckin-form-grid .field-label {
      margin-bottom: 7px;
      color: #4f5f7b;
      font-size: 0.78rem;
      font-weight: 750;
    }

    #precheckin-register-modal .precheckin-form-grid .field-input {
      min-height: 50px;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: none;
    }

    #precheckin-register-modal .form-actions,
    #precheckin-list-modal .form-actions {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(26, 51, 96, 0.09);
      justify-content: space-between;
      flex-wrap: nowrap;
    }

    #precheckin-register-modal .form-actions .form-button {
      min-width: 200px;
    }

    .precheckin-list {
      gap: 10px;
      margin: 0;
    }

    .precheckin-card {
      position: relative;
      overflow: hidden;
      gap: 14px;
      padding: 16px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 10px 28px rgba(23, 43, 82, 0.055);
    }

    .precheckin-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: #4d57ff;
      opacity: 0.82;
    }

    .precheckin-card:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.22);
      box-shadow: 0 15px 34px rgba(23, 43, 82, 0.075);
    }

    .precheckin-card-main {
      gap: 7px;
    }

    .precheckin-card-title {
      font-size: 0.98rem;
      font-weight: 820;
    }

    .precheckin-card-subtitle {
      font-size: 0.8rem;
      font-weight: 650;
    }

    .precheckin-card-chips {
      gap: 6px;
    }

    .precheckin-chip {
      padding: 7px 9px;
      border-radius: 7px;
      background: #f7f8fc;
      color: #52617c;
      border-color: rgba(39, 68, 125, 0.1);
      font-size: 0.76rem;
      font-weight: 700;
    }

    .precheckin-notify,
    .precheckin-complete {
      min-height: 38px;
      padding: 8px 11px;
      border-radius: 7px;
      font-size: 0.78rem;
      font-weight: 780;
      box-shadow: none;
    }

    .precheckin-empty {
      margin: 0;
      padding: 28px 18px;
      border-radius: 8px;
      background: #f8f9fc;
      font-size: 0.9rem;
    }

    /* Team workspace aligned with note creation */
    body.team-modal-open {
      overflow: hidden;
    }

    body.team-modal-open #screen-board {
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      -webkit-filter: blur(1.2px) saturate(102%);
      pointer-events: none;
    }

    #team-modal {
      z-index: 123;
      align-items: center;
      justify-content: center;
      padding: clamp(14px, 3vw, 32px);
    }

    #team-modal .precheckin-modal-backdrop {
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      transition: opacity 0.34s ease;
    }

    #team-modal .team-modal-panel {
      width: min(960px, calc(100vw - 36px));
      height: auto;
      max-height: calc(100dvh - 36px);
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #team-modal.is-open .team-modal-panel {
      opacity: 1;
      transform: translateY(0);
    }

    #team-modal .team-drawer-head {
      position: relative;
      display: block;
      padding: 34px 68px 22px;
      border-bottom: 0;
      background: transparent;
      text-align: center;
    }

    #team-modal .team-drawer-title {
      margin: 0;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
      font-weight: 700;
    }

    #team-modal .team-drawer-subtitle {
      max-width: 500px;
      margin: 7px auto 0;
      font-size: 0.92rem;
      line-height: 1.5;
    }

    #team-modal .team-drawer-close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      width: 38px;
      height: 38px;
      border-color: rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
    }

    #team-modal .team-drawer-body {
      height: auto;
      max-height: calc(100dvh - 142px);
      overflow-y: auto;
      padding: 0 36px 34px;
      scrollbar-width: thin;
    }

    #team-modal .team-overview {
      margin: 0 0 18px;
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #f8f9fc;
    }

    #team-modal .team-overview-item {
      padding: 13px 16px;
    }

    #team-modal .team-overview-value {
      font-size: 1.02rem;
      font-weight: 800;
    }

    #team-modal .team-overview-label {
      font-size: 0.72rem;
      font-weight: 650;
    }

    #team-modal .team-toolbar {
      margin: 0 0 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(26, 51, 96, 0.09);
    }

    #team-modal .team-tabs {
      gap: 2px;
      padding: 3px;
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #f2f4f8;
    }

    #team-modal .team-tab {
      min-height: 36px;
      padding: 8px 13px;
      border-radius: 6px;
      font-size: 0.78rem;
      font-weight: 720;
    }

    #team-modal .team-tab.is-active {
      color: var(--ink);
      box-shadow: 0 1px 4px rgba(22, 40, 77, 0.08);
    }

    #team-modal .team-invite-toggle {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 8px;
      background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bottom) 100%);
      box-shadow: 0 8px 18px rgba(60, 53, 230, 0.14);
      font-size: 0.8rem;
    }

    #team-modal .team-invite-toggle svg {
      width: 17px;
      height: 17px;
      display: block;
      flex: 0 0 auto;
    }

    #team-modal.team-invite-mode .team-overview,
    #team-modal.team-invite-mode .team-tabs,
    #team-modal.team-invite-mode .team-list,
    #team-modal.team-invite-mode .team-feedback {
      display: none;
    }

    #team-modal.team-invite-mode .team-toolbar {
      justify-content: flex-start;
      margin-bottom: 0;
      border-bottom: 0;
    }

    #team-modal.team-invite-mode .team-invite-toggle {
      border: 0;
      padding-left: 0;
      background: transparent;
      color: #5d7097;
      box-shadow: none;
    }

    #team-modal .team-invite-form {
      margin: 0;
      padding: 24px;
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: none;
    }

    #team-modal .team-invite-form-head {
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(26, 51, 96, 0.09);
    }

    #team-modal .team-invite-form-head strong {
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: 1.22rem;
      line-height: 1.25;
      font-weight: 700;
    }

    #team-modal .team-invite-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    #team-modal .team-invite-grid .field {
      margin: 0;
    }

    #team-modal .team-invite-grid .field-label {
      margin-bottom: 7px;
      color: #4f5f7b;
      font-size: 0.78rem;
      font-weight: 750;
    }

    #team-modal .team-invite-grid .field-input {
      min-height: 50px;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: none;
    }

    #team-modal .team-name-field,
    #team-modal .team-role-help {
      grid-column: 1 / -1;
    }

    #team-modal .team-role-help {
      margin: -5px 0 0;
    }

    #team-modal .team-invite-form-actions {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(26, 51, 96, 0.09);
    }

    #team-modal .team-invite-form-actions .form-button {
      min-width: 200px;
      min-height: 46px;
    }

    #team-modal .team-feedback {
      margin: 0 0 12px;
    }

    #team-modal .team-list {
      gap: 8px;
      min-height: 84px;
    }

    #team-modal .team-member {
      grid-template-columns: 42px minmax(0, 1fr) minmax(205px, 0.72fr) auto;
      gap: 12px;
      padding: 13px 14px;
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      box-shadow: none;
    }

    #team-modal .team-member:hover {
      transform: translateY(-1px);
      border-color: rgba(77, 87, 255, 0.2);
      box-shadow: 0 10px 24px rgba(23, 43, 82, 0.055);
    }

    #team-modal .team-member-avatar {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      font-size: 0.75rem;
    }

    #team-modal .team-member-copy strong {
      font-size: 0.86rem;
    }

    #team-modal .team-member-copy span {
      color: #73809a;
      font-size: 0.73rem;
      font-weight: 600;
    }

    #team-modal .team-member-meta {
      gap: 5px;
    }

    #team-modal .team-member select {
      min-height: 36px;
      border-radius: 7px;
      background-color: #f8f9fc;
    }

    #team-modal .team-row-action {
      min-height: 36px;
      border-radius: 7px;
      white-space: nowrap;
    }

    #team-modal .team-empty {
      padding: 34px 20px;
      border-style: solid;
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #f8f9fc;
    }

    #team-modal .team-activity-list {
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      box-shadow: none;
    }

    #team-modal .team-activity-item {
      padding: 14px 15px;
    }

    /* Privacy workspace aligned with note creation */
    body.privacy-modal-open {
      overflow: hidden;
    }

    body.privacy-modal-open #screen-board {
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      -webkit-filter: blur(1.2px) saturate(102%);
      pointer-events: none;
    }

    #privacy-modal {
      z-index: 124;
      align-items: center;
      justify-content: center;
      padding: clamp(14px, 3vw, 32px);
    }

    #privacy-modal .precheckin-modal-backdrop {
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      transition: opacity 0.34s ease;
    }

    #privacy-modal .privacy-modal-panel {
      width: min(960px, calc(100vw - 36px));
      height: auto;
      max-height: calc(100dvh - 36px);
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #privacy-modal.is-open .privacy-modal-panel {
      opacity: 1;
      transform: translateY(0);
    }

    #privacy-modal .team-drawer-head {
      position: relative;
      display: block;
      padding: 34px 68px 22px;
      border-bottom: 0;
      background: transparent;
      text-align: center;
    }

    #privacy-modal .team-drawer-title {
      margin: 0;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
      font-weight: 700;
    }

    #privacy-modal .team-drawer-subtitle {
      max-width: 520px;
      margin: 7px auto 0;
      font-size: 0.92rem;
      line-height: 1.5;
    }

    #privacy-modal .team-drawer-close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      width: 38px;
      height: 38px;
      border-color: rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
    }

    #privacy-modal .privacy-drawer-body {
      display: grid;
      gap: 16px;
      height: auto;
      max-height: calc(100dvh - 142px);
      overflow-y: auto;
      padding: 0 36px 34px;
      scrollbar-width: thin;
    }

    #privacy-modal .privacy-overview {
      margin: 0;
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #f8f9fc;
    }

    #privacy-modal .team-overview-item {
      padding: 13px 16px;
    }

    #privacy-modal .team-overview-value {
      font-size: 1.02rem;
      font-weight: 800;
    }

    #privacy-modal .team-overview-label {
      font-size: 0.72rem;
      font-weight: 650;
    }

    #privacy-modal .privacy-action-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      overflow: hidden;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #ffffff;
    }

    #privacy-modal .privacy-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 20px;
      padding: 15px 16px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    #privacy-modal .privacy-card + .privacy-card {
      border-top: 1px solid rgba(26, 51, 96, 0.09);
    }

    #privacy-modal .privacy-card.is-danger {
      border-color: rgba(184, 50, 50, 0.1);
      background: rgba(255, 250, 250, 0.55);
    }

    #privacy-modal .privacy-card-kicker {
      margin-bottom: 3px;
      font-size: 0.65rem;
      letter-spacing: 0;
    }

    #privacy-modal .privacy-card h4,
    #privacy-modal .privacy-section h4 {
      font-size: 0.88rem;
    }

    #privacy-modal .privacy-card p {
      max-width: 690px;
      margin-top: 4px;
      font-size: 0.75rem;
      line-height: 1.45;
    }

    #privacy-modal .privacy-card .team-row-action {
      min-width: 116px;
      min-height: 38px;
      border-radius: 7px;
      box-shadow: none;
    }

    #privacy-modal .privacy-section {
      padding: 0;
      overflow: hidden;
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #ffffff;
    }

    #privacy-modal .privacy-section-head {
      margin: 0;
      padding: 13px 15px;
      border-bottom: 1px solid rgba(26, 51, 96, 0.09);
      background: #fafbfc;
    }

    #privacy-modal .privacy-member-list,
    #privacy-modal .privacy-login-list {
      gap: 0;
    }

    #privacy-modal .privacy-mini-row {
      min-height: 50px;
      padding: 10px 15px;
      border-radius: 0;
      background: #ffffff;
    }

    #privacy-modal .privacy-mini-row + .privacy-mini-row {
      border-top: 1px solid rgba(26, 51, 96, 0.07);
    }

    #privacy-modal .privacy-mini-pill {
      min-height: 27px;
      padding: 5px 9px;
      border-radius: 7px;
    }

    #privacy-modal .privacy-delete-form {
      display: grid;
      gap: 16px;
      margin: 0;
      padding: 24px;
      border-color: rgba(184, 50, 50, 0.13);
      border-radius: 8px;
      background: #ffffff;
    }

    #privacy-modal .privacy-delete-form[hidden] {
      display: none;
    }

    #privacy-modal .privacy-delete-form .team-invite-form-head {
      margin-bottom: 2px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(26, 51, 96, 0.09);
    }

    #privacy-modal .privacy-delete-form .team-invite-form-head strong {
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: 1.22rem;
      line-height: 1.25;
      font-weight: 700;
    }

    #privacy-modal .privacy-delete-form .field-textarea {
      min-height: 130px;
      border-radius: 8px;
      box-shadow: none;
    }

    #privacy-modal .privacy-delete-form .team-invite-form-actions {
      margin-top: 4px;
      padding-top: 18px;
      border-top: 1px solid rgba(26, 51, 96, 0.09);
    }

    #privacy-modal .privacy-delete-form .form-button {
      min-width: 220px;
      min-height: 46px;
      border-radius: 8px;
    }

    #privacy-modal.privacy-delete-mode .privacy-overview,
    #privacy-modal.privacy-delete-mode .privacy-action-grid,
    #privacy-modal.privacy-delete-mode .privacy-section {
      display: none;
    }

    #privacy-modal.privacy-delete-mode .privacy-drawer-body {
      max-width: 700px;
      margin-inline: auto;
    }

    /* Temporary trash */
    body.trash-modal-open {
      overflow: hidden;
    }

    body.trash-modal-open #screen-board {
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      -webkit-filter: blur(1.2px) saturate(102%);
      pointer-events: none;
    }

    #trash-modal {
      z-index: 125;
      align-items: center;
      justify-content: center;
      padding: clamp(14px, 3vw, 32px);
    }

    #trash-modal .precheckin-modal-backdrop {
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      transition: opacity 0.34s ease;
    }

    #trash-modal .trash-modal-panel {
      width: min(780px, calc(100vw - 36px));
      max-height: calc(100dvh - 36px);
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #trash-modal.is-open .trash-modal-panel {
      opacity: 1;
      transform: translateY(0);
    }

    #trash-modal .trash-head {
      position: relative;
      display: block;
      padding: 34px 68px 22px;
      text-align: center;
    }

    #trash-modal .precheckin-modal-title {
      margin: 0;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
      font-weight: 700;
    }

    #trash-modal .precheckin-modal-text {
      max-width: 520px;
      margin: 7px auto 0;
      font-size: 0.9rem;
      line-height: 1.5;
    }

    #trash-modal .team-drawer-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 38px;
      height: 38px;
      border-color: rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
    }

    .trash-body {
      max-height: calc(100dvh - 150px);
      overflow-y: auto;
      padding: 0 30px 30px;
      scrollbar-width: thin;
    }

    .trash-list {
      overflow: hidden;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #ffffff;
    }

    .trash-list:empty {
      display: none;
    }

    .trash-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 22px;
      padding: 16px;
    }

    .trash-item + .trash-item {
      border-top: 1px solid rgba(26, 51, 96, 0.08);
    }

    .trash-item-copy {
      min-width: 0;
    }

    .trash-item-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 7px;
    }

    .trash-category,
    .trash-remaining {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 0.68rem;
      line-height: 1.2;
      font-weight: 760;
    }

    .trash-category {
      background: #f0f2ff;
      color: #4d57d9;
    }

    .trash-remaining {
      background: #f5f6f8;
      color: #68748a;
    }

    .trash-item-content {
      display: -webkit-box;
      overflow: hidden;
      margin: 0;
      color: var(--ink);
      font-size: 0.88rem;
      line-height: 1.45;
      font-weight: 720;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .trash-item-details {
      display: block;
      margin-top: 6px;
      color: #7a8598;
      font-size: 0.7rem;
      line-height: 1.4;
    }

    .trash-restore-button {
      min-width: 112px;
      min-height: 40px;
      border: 1px solid rgba(77, 87, 255, 0.18);
      border-radius: 7px;
      background: #f7f8ff;
      color: #414bd1;
      font-size: 0.77rem;
      font-weight: 780;
      box-shadow: none;
    }

    .trash-restore-button:hover {
      transform: none;
      background: #eef0ff;
      box-shadow: none;
    }

    .trash-restore-button:disabled {
      opacity: 0.58;
    }

    .trash-empty,
    .trash-loading {
      margin: 0;
      padding: 34px 18px;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #fafbfc;
      color: #748097;
      font-size: 0.82rem;
      text-align: center;
    }

    .trash-empty[hidden] {
      display: none;
    }

    #trash-error {
      margin: 14px 0 0;
    }

    #trash-error:empty {
      display: none;
    }

    @media (max-width: 640px) {
      #trash-modal .trash-head {
        padding: 30px 52px 20px;
      }

      .trash-body {
        padding: 0 16px 20px;
      }

      .trash-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
      }

      .trash-restore-button {
        width: 100%;
      }

      .trash-item-meta {
        align-items: flex-start;
        flex-wrap: wrap;
      }
    }

    /* Account security aligned with note creation */
    body.security-modal-open {
      overflow: hidden;
    }

    body.security-modal-open #screen-board {
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      -webkit-filter: blur(1.2px) saturate(102%);
      pointer-events: none;
    }

    #security-modal {
      z-index: 125;
      align-items: center;
      justify-content: center;
      padding: clamp(14px, 3vw, 32px);
    }

    #security-modal .precheckin-modal-backdrop {
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      transition: opacity 0.34s ease;
    }

    #security-modal .security-modal-panel {
      width: min(720px, calc(100vw - 36px));
      max-height: calc(100dvh - 36px);
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #security-modal.is-open .security-modal-panel {
      opacity: 1;
      transform: translateY(0);
    }

    #security-modal .security-head {
      position: relative;
      display: block;
      padding: 34px 68px 24px;
      text-align: center;
    }

    #security-modal .precheckin-modal-title {
      margin: 0;
      color: var(--ink);
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
      font-weight: 700;
    }

    #security-modal .precheckin-modal-text {
      max-width: 470px;
      margin: 7px auto 0;
      font-size: 0.92rem;
      line-height: 1.5;
    }

    #security-modal .team-drawer-close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      width: 38px;
      height: 38px;
      border-color: rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
    }

    #security-modal .security-session-row {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      margin: 0 32px 32px;
      padding: 18px;
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 8px;
      background: #f8f9fc;
    }

    #security-modal .security-session-row strong {
      font-size: 0.88rem;
      line-height: 1.35;
    }

    #security-modal .security-session-row span {
      max-width: 500px;
      font-size: 0.75rem;
    }

    #security-modal .security-session-row .team-row-action {
      min-width: 118px;
      min-height: 40px;
      border-radius: 7px;
      box-shadow: none;
    }

    #security-modal .team-feedback {
      min-height: 0;
      margin: -18px 32px 24px;
    }

    #security-modal .team-feedback:empty {
      display: none;
    }

    /* Transfer cancellation aligned with note creation */
    body.cancel-transfer-modal-open {
      overflow: hidden;
    }

    body.cancel-transfer-modal-open #screen-board {
      opacity: 0.74;
      filter: blur(1.2px) saturate(102%);
      -webkit-filter: blur(1.2px) saturate(102%);
      pointer-events: none;
    }

    #cancel-transfer-modal {
      z-index: 126;
      padding: clamp(14px, 3vw, 32px);
    }

    #cancel-transfer-modal .cancel-modal-backdrop {
      background: rgba(247, 245, 239, 0.18);
      backdrop-filter: blur(1.4px) saturate(102%);
      -webkit-backdrop-filter: blur(1.4px) saturate(102%);
      transition: opacity 0.34s ease;
    }

    #cancel-transfer-modal .cancel-modal-panel {
      width: min(700px, calc(100vw - 36px));
      max-height: calc(100dvh - 36px);
      padding: 34px 36px 0;
      overflow-y: auto;
      border: 1px solid rgba(26, 51, 96, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 26px 70px rgba(23, 43, 82, 0.14);
      transform: translateY(8px);
      scrollbar-width: thin;
      transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #cancel-transfer-modal.is-open .cancel-modal-panel {
      transform: translateY(0);
    }

    #cancel-transfer-modal .cancel-modal-title {
      margin: 0;
      text-align: center;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
      font-weight: 700;
    }

    #cancel-transfer-modal .cancel-modal-text {
      max-width: 520px;
      margin: 7px auto 26px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.5;
      text-align: center;
    }

    #cancel-transfer-modal #cancel-transfer-form {
      display: grid;
      gap: 18px;
    }

    #cancel-transfer-modal .field {
      margin: 0;
    }

    #cancel-transfer-modal .field-label {
      margin-bottom: 7px;
      color: #4f5f7b;
      font-size: 0.78rem;
      font-weight: 750;
    }

    #cancel-transfer-modal .field-input {
      min-height: 50px;
      border-color: rgba(39, 68, 125, 0.14);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: none;
    }

    #cancel-transfer-modal .field-textarea {
      min-height: 138px;
      resize: vertical;
    }

    #cancel-transfer-modal #cancel-transfer-by {
      color: #5b6880;
      background: #f8f9fc;
    }

    #cancel-transfer-modal #cancel-transfer-error:empty {
      display: none;
    }

    #cancel-transfer-modal .form-actions {
      margin: 2px -36px 0;
      padding: 18px 36px 22px;
      border-top: 1px solid rgba(26, 51, 96, 0.09);
      background: rgba(250, 251, 252, 0.7);
    }

    #cancel-transfer-modal .form-actions .text-button {
      min-width: 110px;
    }

    #cancel-transfer-modal #submit-cancel-transfer {
      min-width: 220px;
      min-height: 48px;
      border-radius: 8px;
      background: linear-gradient(180deg, #cf6161 0%, #b84747 100%);
      box-shadow: 0 8px 18px rgba(184, 71, 71, 0.14);
    }

    /* Note editing and action menus aligned with note creation */
    .note-item.is-editing,
    .note-item.is-general-instruction.is-editing,
    .note-item.is-sensitive-situation.is-editing,
    .note-item.is-taxi-transfer.is-editing,
    .note-item.is-group-arrival.is-editing {
      transform: none;
      border-color: color-mix(in srgb, var(--card-accent) 28%, white);
      box-shadow: 0 16px 38px color-mix(in srgb, var(--card-accent) 9%, transparent);
    }

    .note-editor:not(.note-room-inline-editor):not(.note-taxi-inline-editor) {
      display: grid;
      gap: 12px;
      width: 100%;
      margin: 0;
    }

    .note-editor-field {
      gap: 8px;
    }

    .note-editor-label {
      color: #4f5f7b;
      font-size: 0.75rem;
      font-weight: 750;
    }

    .note-editor-input,
    .note-editor-line {
      border-color: rgba(39, 68, 125, 0.14);
      border-radius: 8px;
      background: #fbfcfe;
      box-shadow: none;
    }

    .note-editor-input {
      min-height: 150px;
      padding: 14px 15px;
      font-size: 0.94rem;
      line-height: 1.55;
    }

    .note-editor-line:focus,
    .note-editor-input:focus {
      border-color: rgba(77, 87, 255, 0.34);
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.08);
    }

    .note-editor-actions {
      gap: 10px;
      margin-top: 2px;
      padding-top: 12px;
      border-top: 1px solid rgba(26, 51, 96, 0.09);
    }

    .note-editor-cancel,
    .note-editor-save {
      min-width: 124px;
      min-height: 42px;
      padding: 9px 14px;
      border-radius: 7px;
      font-size: 0.8rem;
      font-weight: 760;
      box-shadow: none;
    }

    .note-editor-cancel {
      border: 1px solid rgba(39, 68, 125, 0.11);
      background: #ffffff;
      color: #5d6c87;
    }

    .note-editor-save {
      background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bottom) 100%);
      box-shadow: 0 8px 18px rgba(60, 53, 230, 0.14);
    }

    .note-room-inline-editor,
    .note-taxi-inline-editor.note-editor {
      border-color: rgba(77, 87, 255, 0.24);
      border-radius: 7px;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.06);
    }

    .note-content.is-editable,
    .note-context-chip.is-editable,
    .note-taxi-inline-editable {
      cursor: text;
      transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .note-menu {
      position: relative;
      flex: 0 0 auto;
    }

    .note-item.is-action-menu-open {
      z-index: 22;
    }

    .note-menu-trigger {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 7px;
      background: #ffffff;
      color: #62708a;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 1px;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
    }

    .note-menu-trigger:hover,
    .note-menu.is-open .note-menu-trigger {
      border-color: rgba(77, 87, 255, 0.22);
      background: #f7f8ff;
      color: var(--accent-bottom);
    }

    .note-menu-popover {
      top: calc(100% + 6px);
      right: 0;
      min-width: 178px;
      padding: 4px;
      border-color: rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 18px 36px rgba(22, 40, 77, 0.13);
      transform: translateY(-4px);
      z-index: 24;
    }

    .note-menu-action,
    .note-item .note-menu .note-archive,
    .note-item .note-menu .note-cancel-transfer {
      width: 100%;
      height: auto;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border: 0;
      border-radius: 6px;
      padding: 9px 11px;
      background: transparent;
      color: #52617c;
      font-size: 0.78rem;
      font-weight: 720;
      line-height: 1.3;
      text-align: left;
      box-shadow: none;
      white-space: nowrap;
    }

    .note-menu-action:hover,
    .note-item .note-menu .note-archive:hover,
    .note-item .note-menu .note-cancel-transfer:hover {
      transform: none;
      border: 0;
      background: #f5f7fa;
      color: var(--ink);
      box-shadow: none;
    }

    .note-menu .note-menu-action.is-danger,
    .note-item .note-menu .note-cancel-transfer {
      color: #b84747;
    }

    .note-menu .note-menu-action.is-danger:hover,
    .note-item .note-menu .note-cancel-transfer:hover {
      background: #fff5f5;
      color: #a63838;
    }

    /* Shared feedback, loading and empty states */
    #board-error {
      position: fixed;
      left: 50%;
      bottom: 22px;
      z-index: 160;
      width: min(470px, calc(100vw - 32px));
      min-height: 46px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      padding: 11px 14px;
      border: 1px solid rgba(184, 71, 71, 0.16);
      border-radius: 8px;
      background: rgba(255, 250, 250, 0.98);
      color: #a63838;
      box-shadow: 0 14px 34px rgba(23, 43, 82, 0.13);
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1.45;
      transform: translate(-50%, 0);
      animation: boardFeedbackIn 180ms ease-out both;
    }

    #board-error:empty {
      display: none;
    }

    #board-error::before {
      content: "!";
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(184, 71, 71, 0.1);
      font-size: 0.74rem;
      font-weight: 850;
    }

    #board-error.is-success {
      border-color: rgba(32, 139, 87, 0.18);
      background: rgba(248, 253, 250, 0.98);
      color: #176c43;
    }

    #board-error.is-success::before {
      content: "✓";
      background: rgba(32, 139, 87, 0.1);
    }

    #board-error.is-loading {
      border-color: rgba(77, 87, 255, 0.16);
      background: rgba(249, 250, 255, 0.98);
      color: #46557a;
    }

    #board-error.is-loading::before,
    .team-empty.is-loading::before,
    .precheckin-empty.is-loading::before {
      content: "";
      width: 16px;
      height: 16px;
      border: 2px solid rgba(77, 87, 255, 0.18);
      border-top-color: var(--accent-bottom);
      border-radius: 50%;
      animation: appStatusSpin 700ms linear infinite;
    }

    #team-error:not(:empty),
    #privacy-error:not(:empty),
    #security-error:not(:empty),
    #precheckin-error:not(:empty),
    #precheckin-list-error:not(:empty),
    #cancel-transfer-error:not(:empty) {
      padding: 10px 12px;
      border: 1px solid rgba(184, 71, 71, 0.14);
      border-radius: 7px;
      background: #fff8f8;
      color: #a63838;
      line-height: 1.45;
    }

    #team-error.is-success:not(:empty),
    #privacy-error.is-success:not(:empty),
    #security-error.is-success:not(:empty) {
      border-color: rgba(32, 139, 87, 0.16);
      background: #f7fcf9;
      color: #176c43;
    }

    .notes-empty:not(:empty),
    .team-empty,
    .precheckin-empty {
      display: grid;
      justify-items: center;
      gap: 6px;
      margin: 0;
      padding: 28px 18px;
      border: 1px dashed rgba(39, 68, 125, 0.16);
      border-radius: 8px;
      background: #f8f9fc;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.5;
      text-align: center;
    }

    .notes-empty:not(:empty) {
      margin-top: 16px;
    }

    .team-empty.is-loading,
    .precheckin-empty.is-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-style: solid;
    }

    .notes-list.is-loading {
      min-height: 252px;
    }

    .notes-loading-state {
      display: grid;
      gap: 14px;
    }

    .notes-loading-row {
      display: grid;
      gap: 12px;
      padding: 18px;
      border: 1px solid rgba(39, 68, 125, 0.09);
      border-radius: 8px;
      background: #ffffff;
    }

    .notes-loading-bar {
      height: 11px;
      border-radius: 4px;
      background: #e9edf4;
      animation: notesLoadingPulse 1.15s ease-in-out infinite alternate;
    }

    .notes-loading-bar.is-short {
      width: 24%;
    }

    .notes-loading-bar.is-medium {
      width: 58%;
    }

    .notes-loading-bar.is-long {
      width: 84%;
    }

    /* Board chrome aligned with the note creation system */
    .board-app {
      border-color: rgba(39, 68, 125, 0.09);
      border-radius: 14px;
      background: #f5f7fc;
      box-shadow: 0 16px 38px rgba(23, 42, 82, 0.07);
    }

    .board-header {
      grid-template-columns: 44px minmax(220px, 1fr) 44px;
      gap: clamp(12px, 2vw, 20px);
      min-height: 74px;
      padding: 14px clamp(16px, 2.4vw, 26px);
      border-bottom-color: rgba(39, 68, 125, 0.09);
    }

    .board-brand {
      width: 44px;
      height: 44px;
      justify-content: center;
      border-radius: 8px;
      transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
    }

    .board-logo-icon,
    .board-avatar-button {
      width: 42px;
      height: 42px;
    }

    .board-date-input {
      width: min(100%, 360px);
      min-height: 44px;
      border-color: rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      padding: 10px 13px;
      background: #f8f9fc;
      font-size: 0.88rem;
      font-weight: 700;
      box-shadow: none;
      transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .board-date-input:hover {
      border-color: rgba(77, 87, 255, 0.2);
      background: #ffffff;
    }

    .board-date-input:focus {
      border-color: rgba(77, 87, 255, 0.32);
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.07);
    }

    .board-avatar-button {
      font-size: 0.82rem;
      letter-spacing: 0;
      box-shadow: 0 7px 16px rgba(60, 53, 230, 0.14);
      transition: transform 160ms ease, box-shadow 160ms ease;
    }

    .board-avatar-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(60, 53, 230, 0.18);
    }

    .board-avatar-button:focus-visible {
      outline: none;
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.13), 0 7px 16px rgba(60, 53, 230, 0.14);
    }

    .board-avatar-menu {
      top: calc(100% + 8px);
      width: 270px;
      min-width: 0;
      padding: 6px;
      border-color: rgba(39, 68, 125, 0.11);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.985);
      box-shadow: 0 18px 42px rgba(23, 42, 82, 0.14);
      transform: translateY(-5px) scale(0.985);
      transform-origin: top right;
      transition: opacity 160ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .board-avatar-menu.is-open {
      transform: translateY(0) scale(1);
    }

    .board-profile-meta {
      gap: 3px;
      margin: 0 0 5px;
      padding: 11px 12px 12px;
      border-bottom-color: rgba(39, 68, 125, 0.09);
    }

    .board-profile-meta strong {
      overflow: hidden;
      color: var(--ink);
      font-size: 0.85rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .board-profile-meta span {
      color: #71809a;
      font-size: 0.73rem;
      font-weight: 650;
    }

    .board-menu-button {
      min-height: 39px;
      border-radius: 6px;
      padding: 9px 11px;
      background: transparent;
      color: #52617c;
      font-size: 0.79rem;
      font-weight: 720;
      transition: background 150ms ease, color 150ms ease;
    }

    .board-menu-button + .board-menu-button {
      margin-top: 2px;
    }

    .board-menu-button.is-team:hover,
    .board-menu-button.is-privacy:hover,
    .board-menu-button.is-security:hover {
      background: #f5f6ff;
      color: var(--accent-bottom);
    }

    #logout-button {
      position: relative;
      margin-top: 9px;
      color: #a84a4a;
    }

    #logout-button::before {
      content: "";
      position: absolute;
      top: -5px;
      right: 4px;
      left: 4px;
      height: 1px;
      background: rgba(39, 68, 125, 0.09);
    }

    #logout-button:hover {
      background: #fff6f6;
      color: #a63838;
    }

    .board-body {
      padding: clamp(20px, 2.6vw, 30px) clamp(16px, 2.8vw, 30px) clamp(22px, 3vw, 34px);
    }

    .board-panel {
      border-color: rgba(39, 68, 125, 0.1);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 12px 30px rgba(23, 42, 82, 0.055);
    }

    /* One quiet command bar for search and daily actions */
    .board-panel-head {
      display: block;
    }

    .board-panel-title {
      margin-bottom: 6px;
      font-size: clamp(1.5rem, 2.2vw, 1.82rem);
    }

    .board-panel-text {
      font-size: 0.9rem;
      line-height: 1.5;
    }

    .board-command-bar {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      align-items: center;
      gap: 12px;
      margin-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
    }

    .board-search-row {
      min-width: 0;
      margin-top: 0;
    }

    .ops-search {
      width: 100%;
      min-height: 44px;
      padding: 5px 6px 5px 13px;
      border-color: rgba(39, 68, 125, 0.12);
      background: #f8f9fc;
      box-shadow: none;
      transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .ops-search:focus-within {
      border-color: rgba(77, 87, 255, 0.3);
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.065);
    }

    .ops-search input {
      font-size: 0.82rem;
      font-weight: 650;
    }

    .ops-search-clear {
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #71809a;
    }

    .ops-search-clear:hover {
      border-color: transparent;
      background: #eef1f7;
      transform: none;
    }

    .board-panel-actions {
      gap: 6px;
    }

    .board-archive-button,
    .board-filter-button,
    .board-precheckin-button,
    .board-return-button,
    .board-add-button {
      min-height: 44px;
      height: 44px;
      border-radius: 8px;
      box-shadow: none;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .board-archive-button,
    .board-add-button {
      width: 44px;
    }

    .board-archive-button,
    .board-filter-button,
    .board-precheckin-button,
    .board-return-button {
      border-color: rgba(39, 68, 125, 0.12);
      background: #ffffff;
      color: #52617c;
    }

    .board-filter-button,
    .board-precheckin-button {
      position: relative;
      padding: 0 12px;
      gap: 7px;
      font-size: 0.8rem;
      font-weight: 720;
    }

    .board-archive-button:hover,
    .board-filter-button:hover,
    .board-precheckin-button:hover,
    .board-precheckin-button.is-open,
    .board-return-button:hover {
      border-color: rgba(77, 87, 255, 0.2);
      background: #f5f6ff;
      color: var(--accent-bottom);
      box-shadow: none;
      transform: translateY(-1px);
    }

    .board-filter-button.is-active,
    .board-precheckin-button.is-open {
      border-color: rgba(77, 87, 255, 0.24);
      background: #f1f2ff;
      color: var(--accent-bottom);
      box-shadow: none;
    }

    .board-filter-count,
    .board-precheckin-count {
      min-width: 19px;
      height: 19px;
      padding: 0 5px;
      border: 0;
      border-radius: 999px;
      background: #e9eaff;
      color: #3c35e6;
      box-shadow: none;
      font-size: 0.67rem;
      font-weight: 800;
    }

    .board-precheckin-count {
      position: static;
    }

    .board-add-button {
      border-color: #433cea;
      background: #433cea;
      color: #ffffff;
      font-size: 1.55rem;
      font-weight: 400;
    }

    .board-add-button:hover {
      border-color: #3731d9;
      background: #3731d9;
      box-shadow: 0 8px 18px rgba(60, 53, 230, 0.18);
      color: #ffffff;
      transform: translateY(-1px);
    }

    .board-archive-button:focus-visible,
    .board-filter-button:focus-visible,
    .board-precheckin-button:focus-visible,
    .board-return-button:focus-visible,
    .board-add-button:focus-visible,
    .ops-search-clear:focus-visible {
      outline: none;
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.1);
    }

    .board-checklist-button {
      position: relative;
      width: auto;
      min-width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 12px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      color: #52617c;
      cursor: pointer;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .board-checklist-button svg {
      width: 20px;
      height: 20px;
    }

    .board-checklist-button:hover,
    .board-checklist-button.is-open {
      border-color: rgba(77, 87, 255, 0.22);
      background: #f5f6ff;
      color: #433cea;
      transform: translateY(-1px);
    }

    .board-checklist-count {
      min-width: 28px;
      height: 19px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      border-radius: 999px;
      background: #e9eaff;
      color: #3c35e6;
      font-size: 0.65rem;
      font-weight: 800;
    }

    body.checklist-modal-open {
      overflow: hidden;
    }

    body.checklist-modal-open #screen-board {
      filter: blur(8px) saturate(0.88);
      transform: scale(0.997);
      transition: filter 260ms ease, transform 260ms ease;
    }

    .checklist-modal {
      position: fixed;
      inset: 0;
      z-index: 170;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .checklist-modal[hidden] {
      display: none;
    }

    .checklist-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(247, 249, 253, 0.48);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }

    .checklist-modal-panel {
      position: relative;
      z-index: 1;
      width: min(100%, 880px);
      max-height: calc(100dvh - 48px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.985);
      box-shadow: 0 22px 58px rgba(23, 42, 82, 0.13);
      opacity: 0;
      transform: translateY(10px) scale(0.99);
      transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .checklist-modal.is-open .checklist-modal-panel {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .checklist-settings-panel {
      width: min(100%, 1120px);
    }

    .checklist-modal-head {
      min-height: 100px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 24px 26px 20px;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
    }

    .checklist-kicker {
      display: block;
      margin-bottom: 6px;
      color: #433cea;
      font-size: 0.68rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .checklist-modal-head h3 {
      margin: 0;
      color: #10254a;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.55rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
    }

    .checklist-modal-head p {
      margin: 6px 0 0;
      color: #71809a;
      font-size: 0.84rem;
      line-height: 1.45;
    }

    .checklist-close {
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      color: #60708d;
      font-size: 1.45rem;
      line-height: 1;
      cursor: pointer;
    }

    .checklist-close:hover {
      border-color: rgba(77, 87, 255, 0.22);
      background: #f5f6ff;
      color: #433cea;
    }

    .checklist-progress {
      height: 3px;
      background: #eef0f6;
    }

    .checklist-progress span {
      display: block;
      width: 0;
      height: 100%;
      background: #433cea;
      transition: width 220ms ease;
    }

    .daily-checklist-filter {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 26px;
      border-bottom: 1px solid rgba(39, 68, 125, 0.08);
      background: #fafbfe;
    }

    .daily-checklist-filter[hidden] {
      display: none;
    }

    .daily-checklist-filter label {
      flex: 0 0 auto;
      color: #71809a;
      font-size: 0.72rem;
      font-weight: 760;
    }

    .daily-checklist-filter select {
      width: min(100%, 320px);
      min-height: 40px;
      border: 1px solid rgba(39, 68, 125, 0.13);
      border-radius: 8px;
      padding: 0 36px 0 12px;
      background: #ffffff;
      color: #20345b;
      font: inherit;
      font-size: 0.76rem;
      font-weight: 720;
      cursor: pointer;
    }

    .daily-checklist-filter select:focus {
      border-color: rgba(67, 60, 234, 0.45);
      outline: 3px solid rgba(67, 60, 234, 0.1);
    }

    .daily-checklist-body {
      min-height: 260px;
      padding: 8px 26px 24px;
      overflow-y: auto;
    }

    .daily-checklist-empty {
      min-height: 250px;
      display: grid;
      place-items: center;
      text-align: center;
      color: #71809a;
    }

    .daily-checklist-empty strong {
      display: block;
      margin-bottom: 6px;
      color: #10254a;
      font-size: 1rem;
    }

    .daily-run {
      padding-top: 20px;
    }

    .daily-run + .daily-run {
      margin-top: 22px;
      border-top: 1px solid rgba(39, 68, 125, 0.09);
    }

    .daily-run-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 16px;
    }

    .daily-run-title strong {
      display: block;
      color: #10254a;
      font-size: 1rem;
    }

    .daily-run-title span,
    .daily-run-progress {
      color: #71809a;
      font-size: 0.76rem;
    }

    .daily-run-status {
      flex: 0 0 auto;
      padding: 6px 9px;
      border-radius: 999px;
      background: #f1f2ff;
      color: #433cea;
      font-size: 0.68rem;
      font-weight: 800;
    }

    .daily-run-status.is-completed {
      background: #edf8f1;
      color: #247a4b;
    }

    .daily-phase + .daily-phase {
      margin-top: 20px;
    }

    .daily-phase-title {
      margin: 0 0 7px;
      color: #71809a;
      font-size: 0.68rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .daily-checklist-item {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      min-height: 58px;
      border-top: 1px solid rgba(39, 68, 125, 0.08);
    }

    .daily-checklist-item:last-child {
      border-bottom: 1px solid rgba(39, 68, 125, 0.08);
    }

    .daily-item-check {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(39, 68, 125, 0.2);
      border-radius: 6px;
      background: #ffffff;
      color: transparent;
      cursor: pointer;
    }

    .daily-item-check.is-completed {
      border-color: #433cea;
      background: #433cea;
      color: #ffffff;
    }

    .daily-item-check:disabled {
      cursor: default;
      opacity: 0.55;
    }

    .daily-item-copy strong {
      display: block;
      color: #20345b;
      font-size: 0.84rem;
      line-height: 1.35;
    }

    .daily-item-copy span {
      display: block;
      margin-top: 2px;
      color: #8793aa;
      font-size: 0.69rem;
      line-height: 1.35;
    }

    .daily-item-menu {
      position: relative;
    }

    .daily-item-menu > button {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #71809a;
      cursor: pointer;
      font-size: 1rem;
    }

    .daily-item-menu-options {
      position: absolute;
      right: 0;
      top: 38px;
      z-index: 4;
      width: 190px;
      padding: 5px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 12px 28px rgba(23, 42, 82, 0.12);
    }

    .daily-item-menu-options button {
      width: 100%;
      min-height: 36px;
      border: 0;
      border-radius: 6px;
      padding: 0 9px;
      background: transparent;
      color: #52617c;
      text-align: left;
      cursor: pointer;
      font-size: 0.74rem;
    }

    .daily-item-menu-options button:hover {
      background: #f5f6ff;
      color: #433cea;
    }

    .daily-run-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 16px;
    }

    .daily-run-actions button {
      min-height: 40px;
      border: 1px solid rgba(77, 87, 255, 0.18);
      border-radius: 8px;
      padding: 0 15px;
      background: #f5f6ff;
      color: #433cea;
      cursor: pointer;
      font-size: 0.76rem;
      font-weight: 760;
    }

    .checklist-feedback {
      min-height: 20px;
      margin: 0 26px 12px;
    }

    .checklist-feedback.is-success {
      color: #247a4b;
    }

    .checklist-modal-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      padding: 16px 26px;
      border-top: 1px solid rgba(39, 68, 125, 0.09);
    }

    .checklist-modal-actions .form-button {
      width: auto;
      min-width: 150px;
      min-height: 46px;
      border-radius: 8px;
      background: #433cea;
      box-shadow: none;
    }

    .checklist-settings-tabs {
      display: flex;
      gap: 4px;
      padding: 10px 20px 0;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
    }

    .checklist-settings-tabs button {
      min-height: 40px;
      border: 0;
      border-bottom: 2px solid transparent;
      padding: 0 14px;
      background: transparent;
      color: #71809a;
      cursor: pointer;
      font-size: 0.78rem;
      font-weight: 760;
    }

    .checklist-settings-tabs button.is-active {
      border-bottom-color: #433cea;
      color: #10254a;
    }

    .checklist-settings-body {
      min-height: 540px;
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      overflow: hidden;
    }

    .checklist-template-sidebar {
      padding: 18px 14px;
      overflow-y: auto;
      border-right: 1px solid rgba(39, 68, 125, 0.09);
      background: #fafbfe;
    }

    .checklist-new-template {
      width: 100%;
      min-height: 42px;
      border: 1px solid rgba(77, 87, 255, 0.18);
      border-radius: 8px;
      background: #f1f2ff;
      color: #433cea;
      cursor: pointer;
      font-size: 0.76rem;
      font-weight: 760;
    }

    .checklist-template-list {
      margin-top: 12px;
    }

    .checklist-template-option {
      width: 100%;
      display: block;
      border: 0;
      border-radius: 7px;
      padding: 12px 10px;
      background: transparent;
      color: #52617c;
      text-align: left;
      cursor: pointer;
    }

    .checklist-template-option + .checklist-template-option {
      margin-top: 3px;
    }

    .checklist-template-option strong,
    .checklist-template-option span {
      display: block;
    }

    .checklist-template-option strong {
      color: #20345b;
      font-size: 0.78rem;
    }

    .checklist-template-option span {
      margin-top: 4px;
      color: #8793aa;
      font-size: 0.68rem;
    }

    .checklist-template-option.is-active {
      background: #eceeff;
      color: #433cea;
    }

    .checklist-editor {
      padding: 22px 24px 0;
      overflow-y: auto;
    }

    .checklist-editor-heading,
    .checklist-editor-section-head,
    .checklist-editor-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .checklist-editor-heading {
      margin-bottom: 18px;
    }

    .checklist-editor-heading strong,
    .checklist-editor-heading span {
      display: block;
    }

    .checklist-editor-heading strong {
      color: #10254a;
      font-size: 1rem;
    }

    .checklist-editor-heading span {
      margin-top: 3px;
      color: #8793aa;
      font-size: 0.7rem;
    }

    .checklist-archive-template {
      border: 0;
      background: transparent;
      color: #a24d5d;
      cursor: pointer;
      font-size: 0.72rem;
      font-weight: 720;
    }

    .checklist-editor-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 140px 140px;
      gap: 12px;
    }

    .checklist-editor .field {
      width: 100%;
      max-width: none;
      margin-bottom: 14px;
    }

    .checklist-editor .field-input {
      min-height: 46px;
      border-radius: 8px;
      background: #f9fafc;
      font-size: 0.82rem;
      box-shadow: none;
    }

    .checklist-days {
      margin: 0 0 16px;
      padding: 0;
      border: 0;
    }

    .checklist-days legend {
      margin-bottom: 7px;
      color: #52617c;
      font-size: 0.72rem;
      font-weight: 720;
    }

    .checklist-days > div {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
    }

    .checklist-days input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .checklist-days span {
      min-height: 36px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 7px;
      background: #ffffff;
      color: #71809a;
      cursor: pointer;
      font-size: 0.7rem;
      font-weight: 720;
    }

    .checklist-days input:checked + span {
      border-color: rgba(77, 87, 255, 0.24);
      background: #eceeff;
      color: #433cea;
    }

    .checklist-validity-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 180px;
      align-items: end;
    }

    .checklist-active-toggle {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      padding: 0 12px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #f9fafc;
    }

    .checklist-active-toggle strong,
    .checklist-active-toggle small {
      display: block;
    }

    .checklist-active-toggle strong {
      color: #52617c;
      font-size: 0.72rem;
    }

    .checklist-active-toggle small {
      color: #8793aa;
      font-size: 0.62rem;
    }

    .checklist-active-toggle input {
      accent-color: #433cea;
    }

    .checklist-editor-section {
      margin-top: 4px;
      padding: 16px 0 4px;
      border-top: 1px solid rgba(39, 68, 125, 0.09);
    }

    .checklist-editor-section-head strong,
    .checklist-editor-section-head span {
      display: block;
    }

    .checklist-editor-section-head strong {
      color: #20345b;
      font-size: 0.84rem;
    }

    .checklist-editor-section-head span {
      margin-top: 2px;
      color: #8793aa;
      font-size: 0.68rem;
    }

    .checklist-editor-section-head button {
      border: 0;
      background: transparent;
      color: #433cea;
      cursor: pointer;
      font-size: 0.7rem;
      font-weight: 760;
    }

    .checklist-editor-items {
      margin-top: 10px;
    }

    .checklist-editor-item {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 130px 118px auto 32px 32px;
      align-items: center;
      gap: 8px;
      min-height: 52px;
      border-top: 1px solid rgba(39, 68, 125, 0.08);
    }

    .checklist-editor-item:last-child {
      border-bottom: 1px solid rgba(39, 68, 125, 0.08);
    }

    .checklist-editor-item input[type="text"],
    .checklist-editor-item select {
      width: 100%;
      min-height: 38px;
      border: 1px solid transparent;
      border-radius: 7px;
      padding: 0 9px;
      background: transparent;
      color: #52617c;
      font: inherit;
      font-size: 0.72rem;
    }

    .checklist-editor-item input[type="text"]:focus,
    .checklist-editor-item select:focus {
      outline: none;
      border-color: rgba(77, 87, 255, 0.24);
      background: #f9fafc;
    }

    .checklist-required-label {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #71809a;
      font-size: 0.68rem;
    }

    .checklist-required-label input {
      accent-color: #433cea;
    }

    .checklist-item-move,
    .checklist-item-remove {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #8793aa;
      cursor: pointer;
    }

    .checklist-item-remove:hover {
      background: #fff2f4;
      color: #a24d5d;
    }

    .checklist-editor-actions {
      position: sticky;
      bottom: 0;
      margin: 16px -24px 0;
      padding: 14px 24px;
      border-top: 1px solid rgba(39, 68, 125, 0.09);
      background: rgba(255, 255, 255, 0.97);
    }

    .checklist-editor-actions span {
      color: #8793aa;
      font-size: 0.67rem;
    }

    .checklist-editor-actions .form-button {
      width: auto;
      min-width: 180px;
      min-height: 46px;
      border-radius: 8px;
      background: #433cea;
      box-shadow: none;
    }

    .checklist-history-view {
      min-height: 520px;
      padding: 10px 24px 24px;
      overflow-y: auto;
    }

    .checklist-history-row {
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr) 130px 110px;
      align-items: center;
      gap: 14px;
      min-height: 62px;
      border-bottom: 1px solid rgba(39, 68, 125, 0.08);
      color: #71809a;
      font-size: 0.73rem;
    }

    .checklist-history-row strong {
      display: block;
      color: #20345b;
      font-size: 0.78rem;
    }

    .checklist-history-row .is-completed {
      color: #247a4b;
      font-weight: 760;
    }

    .checklist-history-empty,
    .checklist-template-empty {
      padding: 24px 12px;
      color: #8793aa;
      text-align: center;
      font-size: 0.74rem;
    }

    /* Authentication and onboarding use the same quiet product language */
    body.is-auth-screen {
      padding: clamp(16px, 3vw, 30px);
      background: #f5f7fc;
    }

    body.is-auth-screen .app-shell {
      min-height: calc(100dvh - clamp(32px, 6vw, 60px));
      display: grid;
      place-items: center;
    }

    .auth-screen {
      --auth-progress: 0%;
      width: min(100%, 560px);
      max-width: 560px;
      margin: auto;
      padding: clamp(28px, 4vw, 38px);
      overflow: hidden;
      border: 1px solid rgba(39, 68, 125, 0.1);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 16px 38px rgba(23, 42, 82, 0.075);
    }

    .auth-screen.is-active {
      display: block;
      animation: authPanelIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .auth-screen.auth-screen-wide {
      width: min(100%, 720px);
      max-width: 720px;
    }

    .auth-screen.auth-onboarding::before,
    .auth-screen.auth-onboarding::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 3px;
    }

    .auth-screen.auth-onboarding::before {
      right: 0;
      background: #edf0f6;
    }

    .auth-screen.auth-onboarding::after {
      width: var(--auth-progress);
      background: #433cea;
      transition: width 240ms ease;
    }

    #screen-form { --auth-progress: 33.333%; }
    #screen-collaborators { --auth-progress: 50%; }
    #screen-account { --auth-progress: 66.666%; }
    #screen-email-code { --auth-progress: 100%; }

    .auth-screen .flow-logo,
    .auth-screen > .logo {
      width: min(100%, 178px);
      margin: 0 auto 22px;
    }

    .auth-screen .form-title {
      margin-bottom: 7px;
      font-size: clamp(1.55rem, 3vw, 1.9rem);
      line-height: 1.15;
      letter-spacing: 0;
    }

    .auth-screen .title-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: #f0f1ff;
      color: #433cea;
      box-shadow: none;
    }

    .auth-screen .title-icon svg {
      width: 18px;
      height: 18px;
    }

    .auth-screen .form-text {
      max-width: 440px;
      margin-bottom: 24px;
      color: #71809a;
      font-size: 0.88rem;
      line-height: 1.5;
    }

    .auth-screen form {
      width: 100%;
      margin: 0 auto;
    }

    .auth-screen .field {
      width: 100%;
      max-width: none;
      margin-bottom: 15px;
    }

    .auth-screen .field-label {
      margin-bottom: 7px;
      color: #52617c;
      font-size: 0.78rem;
      font-weight: 720;
    }

    .auth-screen .field-input {
      min-height: 48px;
      border-color: rgba(39, 68, 125, 0.13);
      border-radius: 8px;
      padding: 13px 14px;
      background: #f8f9fc;
      color: var(--ink);
      font-size: 0.9rem;
      box-shadow: none;
      transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .auth-screen .field-input:hover {
      border-color: rgba(77, 87, 255, 0.2);
      background: #ffffff;
    }

    .auth-screen .field-input:focus {
      border-color: rgba(77, 87, 255, 0.32);
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.07);
    }

    .auth-screen .field-error {
      min-height: 18px;
      margin-top: 7px;
      font-size: 0.76rem;
      line-height: 1.35;
    }

    .auth-screen .form-link-row {
      width: 100%;
      margin: -4px 0 16px;
    }

    .auth-screen .form-link-button {
      color: #433cea;
      font-size: 0.78rem;
      font-weight: 720;
    }

    .auth-screen .turnstile-wrap {
      width: 100%;
      min-height: 70px;
      margin: 12px auto 0;
    }

    .auth-screen .legal-consent {
      width: 100%;
      margin: 2px 0 16px;
      padding: 13px 14px;
      border-color: rgba(39, 68, 125, 0.11);
      border-radius: 8px;
      background: #f8f9fc;
      color: #60708d;
      font-size: 0.76rem;
      line-height: 1.45;
    }

    .auth-screen .legal-inline-button {
      color: #433cea;
      font-weight: 720;
    }

    .auth-screen .form-actions {
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: 12px;
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(39, 68, 125, 0.09);
    }

    .auth-screen .form-button {
      width: auto;
      min-width: 190px;
      min-height: 50px;
      border-radius: 8px;
      padding: 0 22px;
      background: #433cea;
      font-size: 0.88rem;
      font-weight: 720;
      box-shadow: none;
    }

    .auth-screen .form-button:hover {
      background: #3731d9;
      box-shadow: 0 8px 18px rgba(60, 53, 230, 0.17);
      transform: translateY(-1px);
    }

    .auth-screen .form-button:focus-visible,
    .auth-screen .text-button:focus-visible,
    .auth-screen .form-link-button:focus-visible,
    .auth-screen .legal-inline-button:focus-visible,
    .auth-screen .count-tile:focus-visible {
      outline: none;
      box-shadow: 0 0 0 4px rgba(77, 87, 255, 0.1);
    }

    .auth-screen .text-button {
      min-height: 44px;
      padding: 0 8px;
      color: #71809a;
      font-size: 0.82rem;
      font-weight: 680;
    }

    .auth-screen .count-grid {
      max-width: none;
      gap: 8px;
      margin-bottom: 8px;
    }

    .auth-screen .count-tile {
      min-height: 48px;
      border-color: rgba(39, 68, 125, 0.11);
      border-radius: 8px;
      padding: 0;
      background: #f8f9fc;
      box-shadow: none;
      color: #52617c;
      font-size: 0.88rem;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .auth-screen .count-tile:hover {
      border-color: rgba(77, 87, 255, 0.2);
      background: #f5f6ff;
      box-shadow: none;
    }

    .auth-screen .count-tile.is-selected {
      border-color: #433cea;
      background: #433cea;
      color: #ffffff;
      box-shadow: none;
    }

    #screen-account #account-form {
      display: block;
    }

    #screen-account #account-form .field {
      margin-bottom: 13px;
    }

    #screen-account .legal-consent,
    #screen-account .turnstile-wrap,
    #screen-account .form-actions {
      grid-column: auto;
    }

    .auth-screen .code-input {
      font-size: 1.1rem;
      letter-spacing: 0.22em;
    }

    @keyframes authPanelIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 620px) {
      body.is-auth-screen {
        padding: 12px;
      }

      body.is-auth-screen .app-shell {
        min-height: calc(100dvh - 24px);
        align-items: start;
      }

      .auth-screen,
      .auth-screen.auth-screen-wide {
        width: 100%;
        max-width: none;
        padding: 26px 20px 22px;
        border-radius: 10px;
      }

      .auth-screen .flow-logo,
      .auth-screen > .logo {
        width: min(100%, 160px);
        margin-bottom: 18px;
      }

      .auth-screen .form-text {
        margin-bottom: 20px;
      }

      #screen-account #account-form {
        grid-template-columns: minmax(0, 1fr);
      }

      #screen-account .legal-consent,
      #screen-account .turnstile-wrap,
      #screen-account .form-actions {
        grid-column: 1;
      }

      .auth-screen .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      .auth-screen .form-button,
      .auth-screen .text-button {
        width: 100%;
      }
    }

    @media (max-width: 360px) {
      .auth-screen .turnstile-wrap .cf-turnstile {
        transform: scale(0.88);
        transform-origin: center;
      }
    }

    @media (max-width: 340px) {
      .auth-screen .turnstile-wrap .cf-turnstile {
        transform: scale(0.82);
      }
    }

    @keyframes boardFeedbackIn {
      from { opacity: 0; transform: translate(-50%, 6px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    @keyframes appStatusSpin {
      to { transform: rotate(360deg); }
    }

    @keyframes notesLoadingPulse {
      from { opacity: 0.52; }
      to { opacity: 0.92; }
    }

    @media (max-width: 920px) {
      .board-header {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 10px;
        min-height: 68px;
        padding: 12px 14px;
      }

      .board-brand {
        width: 42px;
        height: 42px;
      }

      .board-logo-icon,
      .board-avatar-button {
        width: 40px;
        height: 40px;
      }

      .board-date-input {
        width: min(100%, 320px);
        min-width: 0;
        min-height: 42px;
        font-size: 0.82rem;
      }

      .board-date-navigation {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        gap: 6px;
      }

      .board-date-nav-button {
        width: 36px;
        height: 40px;
        font-size: 1.35rem;
      }

      .board-command-bar {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }

      .board-panel-actions {
        width: 100%;
        justify-content: flex-end;
      }

      .notes-category-subtitle {
        display: none;
      }

      .note-item .note-item-head,
      .note-item.is-general-instruction .note-item-head,
      .note-item.is-sensitive-situation .note-item-head,
      .note-item.is-taxi-transfer .note-item-head,
      .note-item.is-group-arrival .note-item-head {
        align-items: flex-start;
      }

      .note-actions,
      .note-item.is-general-instruction .note-actions,
      .note-item.is-sensitive-situation .note-actions,
      .note-item.is-taxi-transfer .note-actions,
      .note-item.is-group-arrival .note-actions {
        align-self: flex-start;
      }

      .board-filter-grid {
        grid-template-columns: 1fr;
      }

      #team-modal .team-member {
        grid-template-columns: 40px minmax(0, 1fr) minmax(180px, 0.72fr);
      }

      #team-modal .team-row-action,
      #team-modal .team-row-actions {
        grid-column: 2 / -1;
        justify-self: start;
      }
    }

    @media (max-width: 560px) {
      .board-header {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        grid-template-rows: 40px 42px;
        gap: 8px;
        min-height: auto;
      }

      .board-date-wrap {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
      }

      .board-date-navigation {
        width: min(100%, 360px);
        grid-template-columns: 38px minmax(0, 1fr) 38px;
      }

      .board-date-nav-button {
        width: 38px;
      }
    }

    @media (max-width: 720px) {
      .board-app {
        border-radius: 10px;
      }

      .board-avatar-menu {
        width: min(270px, calc(100vw - 48px));
      }

      .board-body {
        padding: 14px 12px 18px;
      }

      .board-panel {
        border-radius: 10px;
      }

      .board-command-bar {
        margin-top: 16px;
        padding-bottom: 16px;
      }

      .board-panel-actions {
        display: grid;
        grid-template-columns: repeat(5, 44px);
        justify-content: space-between;
      }

      .board-filter-button,
      .board-precheckin-button,
      .board-checklist-button {
        width: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
      }

      .board-control-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .board-filter-count,
      .board-precheckin-count,
      .board-checklist-count {
        position: absolute;
        top: -5px;
        right: -5px;
        border: 2px solid #ffffff;
      }

      .checklist-modal {
        align-items: flex-start;
        padding: 12px;
      }

      .checklist-modal-panel,
      .checklist-settings-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 8px;
      }

      .checklist-modal-head {
        min-height: 88px;
        padding: 20px 18px 16px;
      }

      .daily-checklist-body {
        padding: 4px 18px 18px;
      }

      .daily-checklist-item {
        grid-template-columns: 26px minmax(0, 1fr) 34px;
      }

      .checklist-feedback {
        margin-inline: 18px;
      }

      .checklist-modal-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 14px 18px 18px;
      }

      .checklist-modal-actions .form-button,
      .checklist-modal-actions .text-button {
        width: 100%;
      }

      .checklist-settings-body {
        min-height: 0;
        display: block;
        overflow-y: auto;
      }

      .checklist-template-sidebar {
        max-height: 170px;
        border-right: 0;
        border-bottom: 1px solid rgba(39, 68, 125, 0.09);
      }

      .checklist-template-list {
        display: flex;
        gap: 6px;
        overflow-x: auto;
      }

      .checklist-template-option {
        flex: 0 0 180px;
      }

      .checklist-editor {
        padding: 20px 18px 0;
        overflow: visible;
      }

      .checklist-editor-grid,
      .checklist-validity-grid {
        grid-template-columns: 1fr 1fr;
      }

      .checklist-name-field,
      .checklist-active-toggle {
        grid-column: 1 / -1;
      }

      .checklist-days > div {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .checklist-editor-item {
        grid-template-columns: minmax(0, 1fr) 38px;
        gap: 4px 8px;
        padding: 9px 0;
      }

      .checklist-editor-item input[type="text"] {
        grid-column: 1;
      }

      .checklist-editor-item select,
      .checklist-required-label {
        grid-column: 1 / -1;
      }

      .checklist-item-move,
      .checklist-item-remove {
        grid-column: 2;
        grid-row: 1;
      }

      .checklist-item-move {
        display: none;
      }

      .checklist-editor-actions {
        align-items: stretch;
        flex-direction: column;
        margin-inline: -18px;
        padding-inline: 18px;
      }

      .checklist-editor-actions .form-button {
        width: 100%;
      }

      .checklist-history-view {
        padding-inline: 18px;
      }

      .checklist-history-row {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 5px 12px;
        padding: 10px 0;
      }

      #board-error {
        bottom: 12px;
        width: calc(100vw - 24px);
      }

      .notes-list {
        gap: 24px;
      }

      .notes-category-group,
      .notes-category-group.is-general-instructions,
      .notes-category-group.is-sensitive-situations,
      .notes-category-group.is-taxi-transfers,
      .notes-category-group.is-group-arrivals {
        padding-bottom: 22px;
      }

      .notes-category-title,
      .notes-category-group.is-general-instructions .notes-category-title,
      .notes-category-group.is-sensitive-situations .notes-category-title,
      .notes-category-group.is-group-arrivals .notes-category-title {
        flex-wrap: nowrap;
      }

      .note-item,
      .note-item.is-general-instruction,
      .note-item.is-sensitive-situation,
      .note-item.is-taxi-transfer,
      .note-item.is-group-arrival {
        gap: 12px;
        padding: 15px;
      }

      .note-item .note-item-head,
      .note-item.is-general-instruction .note-item-head,
      .note-item.is-sensitive-situation .note-item-head,
      .note-item.is-taxi-transfer .note-item-head,
      .note-item.is-group-arrival .note-item-head {
        flex-direction: column;
      }

      .note-actions,
      .note-item.is-general-instruction .note-actions,
      .note-item.is-sensitive-situation .note-actions,
      .note-item.is-taxi-transfer .note-actions,
      .note-item.is-group-arrival .note-actions {
        width: 100%;
        margin-left: 0;
      }

      .note-general-body {
        grid-template-columns: 38px minmax(0, 1fr);
      }

      .note-general-card-icon {
        width: 38px;
        height: 38px;
      }

      .board-filter-modal {
        padding: 12px;
      }

      .precheckin-menu,
      #precheckin-register-modal,
      #precheckin-list-modal {
        align-items: flex-start;
        padding: 12px;
      }

      .precheckin-menu-panel,
      #precheckin-register-modal .precheckin-modal-panel,
      #precheckin-list-modal .precheckin-modal-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 26px 18px 20px;
      }

      .precheckin-menu-head {
        padding: 0 34px;
      }

      .precheckin-menu-options {
        grid-template-columns: 1fr;
      }

      .precheckin-menu-button {
        min-height: 84px;
      }

      #precheckin-register-modal .precheckin-form-grid {
        grid-template-columns: 1fr;
      }

      #precheckin-register-modal .form-actions,
      #precheckin-list-modal .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      #precheckin-register-modal .form-actions .form-button,
      #precheckin-register-modal .form-actions .text-button,
      #precheckin-list-modal .form-actions .text-button {
        width: 100%;
      }

      #team-modal {
        align-items: flex-start;
        padding: 12px;
      }

      #team-modal .team-modal-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border: 1px solid rgba(26, 51, 96, 0.12);
        border-radius: 8px;
      }

      #team-modal .team-drawer-head {
        padding: 28px 54px 18px;
      }

      #team-modal .team-drawer-body {
        max-height: calc(100dvh - 118px);
        padding: 0 18px 22px;
      }

      #team-modal .team-overview-item {
        padding: 11px 8px;
      }

      #team-modal .team-toolbar {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      #team-modal .team-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      #team-modal .team-tab {
        min-width: 0;
        padding-inline: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #team-modal .team-invite-toggle {
        width: 100%;
      }

      #team-modal.team-invite-mode .team-toolbar {
        flex-direction: row;
      }

      #team-modal .team-invite-form {
        padding: 18px;
      }

      #team-modal .team-invite-grid {
        grid-template-columns: 1fr;
      }

      #team-modal .team-invite-grid .field,
      #team-modal .team-name-field,
      #team-modal .team-role-help {
        grid-column: 1;
      }

      #team-modal .team-invite-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      #team-modal .team-invite-form-actions .form-button,
      #team-modal .team-invite-form-actions .text-button {
        width: 100%;
      }

      #team-modal .team-member {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
      }

      #team-modal .team-member-meta,
      #team-modal .team-row-action,
      #team-modal .team-row-actions {
        grid-column: 2;
        width: 100%;
      }

      #team-modal .team-row-actions {
        justify-content: flex-start;
      }

      #privacy-modal {
        align-items: flex-start;
        padding: 12px;
      }

      #privacy-modal .privacy-modal-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border: 1px solid rgba(26, 51, 96, 0.12);
        border-radius: 8px;
      }

      #privacy-modal .team-drawer-head {
        padding: 28px 54px 18px;
      }

      #privacy-modal .privacy-drawer-body {
        max-height: calc(100dvh - 118px);
        padding: 0 18px 22px;
      }

      #privacy-modal .team-overview-item {
        padding: 11px 8px;
      }

      #privacy-modal .privacy-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
      }

      #privacy-modal .privacy-card .team-row-action {
        width: 100%;
      }

      #privacy-modal .privacy-mini-row {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      #privacy-modal .privacy-delete-form {
        padding: 18px;
      }

      #privacy-modal .privacy-delete-form .team-invite-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      #privacy-modal .privacy-delete-form .form-button,
      #privacy-modal .privacy-delete-form .text-button {
        width: 100%;
      }

      #security-modal {
        align-items: flex-start;
        padding: 12px;
      }

      #security-modal .security-modal-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 8px;
      }

      #security-modal .security-head {
        padding: 28px 54px 20px;
      }

      #security-modal .security-session-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin: 0 18px 22px;
        padding: 16px;
      }

      #security-modal .security-session-row .team-row-action {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
      }

      #security-modal .team-feedback {
        margin: -10px 18px 20px;
      }

      #cancel-transfer-modal {
        align-items: flex-start;
        padding: 12px;
      }

      #cancel-transfer-modal .cancel-modal-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 28px 18px 0;
        border-radius: 8px;
      }

      #cancel-transfer-modal .cancel-modal-text {
        margin-bottom: 22px;
      }

      #cancel-transfer-modal .field-textarea {
        min-height: 120px;
      }

      #cancel-transfer-modal .form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        margin-inline: -18px;
        padding: 16px 18px 18px;
      }

      #cancel-transfer-modal .form-actions .form-button,
      #cancel-transfer-modal .form-actions .text-button {
        width: 100%;
      }

      .note-editor-actions {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      .note-editor-cancel,
      .note-editor-save {
        width: 100%;
      }

      .note-menu-popover {
        min-width: 164px;
      }

      .board-filter-modal-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 26px 18px 20px;
      }

      .board-filter-modal-head {
        padding: 0 34px;
      }

      .board-filter-actions {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      .board-filter-actions .form-button,
      .board-filter-secondary-actions {
        width: 100%;
      }

      .board-filter-secondary-actions {
        justify-content: space-between;
      }

      body.archive-mode-open #screen-board .board-body {
        align-items: flex-start;
        padding: 12px;
      }

      body.archive-mode-open #screen-board .board-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 26px 18px 20px;
      }

      body.archive-mode-open #screen-board .board-panel-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .archive-date-wrap,
      .archive-date-input,
      body.archive-mode-open #screen-board .board-return-button,
      body.archive-mode-open #screen-board .board-filter-button {
        width: 100%;
      }

      .archive-date-input {
        flex: 1;
      }

      .category-chooser-shell {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 26px 18px 20px;
      }

      .category-carousel-track {
        grid-template-columns: 1fr;
      }

      .category-slide {
        min-height: 88px;
        padding: 13px 14px;
      }

      body.note-flow-modal-open .note-flow-screen.is-active {
        align-items: flex-start;
        padding: 12px;
      }

      body.note-flow-modal-open .note-flow-screen.is-active .note-flow-shell,
      body.note-flow-modal-open .note-flow-screen.is-active .note-flow-shell.is-wide,
      body.note-flow-modal-open .note-flow-screen.is-active .note-flow-shell.is-compact {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 24px 18px 20px;
      }

      body.note-flow-modal-open .note-flow-screen.is-active .field-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      #screen-note-issue .issue-grid,
      #screen-note-resolution .resolution-grid {
        grid-template-columns: 1fr;
      }

      .note-flow-actions,
      body.note-flow-modal-open .note-flow-screen.is-active .form-actions {
        gap: 10px;
      }

      body.note-flow-modal-open .note-flow-screen.is-active .form-actions .form-button {
        min-width: 0;
        flex: 1;
      }

      #screen-note-group .group-choice-grid {
        display: grid;
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .note-flow-step {
        animation: none;
      }

      #board-error,
      #board-error.is-loading::before,
      .team-empty.is-loading::before,
      .precheckin-empty.is-loading::before,
      .notes-loading-bar,
      .board-brand,
      .board-avatar-button,
      .board-avatar-menu {
        animation: none;
        transition: none;
      }
    }

    /* Simplified checklist experience */
    #daily-checklist-modal .checklist-modal-panel {
      width: min(100%, 760px);
    }

    #checklist-settings-modal .checklist-settings-panel {
      width: min(100%, 840px);
      max-height: calc(100dvh - 48px);
      display: flex;
      flex-direction: column;
    }

    #checklist-settings-modal .checklist-settings-body {
      min-height: 0;
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      overflow: hidden;
    }

    #checklist-settings-modal .checklist-template-sidebar {
      min-height: 66px;
      max-height: none;
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 10px;
      padding: 11px 20px;
      overflow-x: auto;
      border-right: 0;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
      background: #fafbfe;
    }

    #checklist-settings-modal .checklist-new-template {
      width: auto;
      min-width: 144px;
      flex: 0 0 auto;
      padding: 0 14px;
    }

    #checklist-settings-modal .checklist-template-list {
      display: flex;
      gap: 6px;
      margin: 0;
    }

    #checklist-settings-modal .checklist-template-option {
      width: auto;
      min-width: 150px;
      max-width: 220px;
      flex: 0 0 auto;
      padding: 9px 11px;
    }

    #checklist-settings-modal .checklist-template-option + .checklist-template-option {
      margin-top: 0;
    }

    #checklist-settings-modal .checklist-editor {
      width: min(100%, 720px);
      min-height: 0;
      flex: 1 1 auto;
      margin: 0 auto;
      padding: 22px 28px 0;
      overflow-y: auto;
    }

    #checklist-settings-modal .checklist-editor-heading {
      margin-bottom: 14px;
    }

    #checklist-settings-modal .checklist-editor-heading strong {
      font-size: 0.94rem;
    }

    #checklist-settings-modal .checklist-editor-heading span {
      font-size: 0.68rem;
    }

    .checklist-simple-form {
      display: block;
    }

    .checklist-simple-question {
      margin-bottom: 14px;
    }

    .checklist-simple-question strong,
    .checklist-simple-question span {
      display: block;
    }

    .checklist-simple-question strong {
      color: #20345b;
      font-size: 0.9rem;
    }

    .checklist-simple-question span {
      margin-top: 3px;
      color: #71809a;
      font-size: 0.72rem;
    }

    .checklist-service-presets {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      margin-bottom: 20px;
    }

    .checklist-service-presets button {
      min-height: 42px;
      border: 1px solid rgba(39, 68, 125, 0.12);
      border-radius: 8px;
      background: #ffffff;
      color: #60708d;
      cursor: pointer;
      font-size: 0.74rem;
      font-weight: 720;
    }

    .checklist-service-presets button small {
      display: block;
      margin-top: 2px;
      color: #8a96aa;
      font-size: 0.61rem;
      font-weight: 650;
    }

    .checklist-service-presets button:hover,
    .checklist-service-presets button.is-active {
      border-color: rgba(77, 87, 255, 0.25);
      background: #f1f2ff;
      color: #433cea;
    }

    #checklist-settings-modal .checklist-editor-section-head {
      align-items: flex-end;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(39, 68, 125, 0.09);
    }

    #checklist-settings-modal .checklist-editor-section-head strong {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.25rem;
    }

    #checklist-settings-modal .checklist-editor-section-head button {
      min-height: 36px;
      border: 1px solid rgba(77, 87, 255, 0.16);
      border-radius: 7px;
      padding: 0 11px;
      background: #f5f6ff;
    }

    #checklist-settings-modal .checklist-editor-items {
      margin-top: 0;
    }

    #checklist-settings-modal #checklist-end-items {
      margin-top: 0;
    }

    #checklist-settings-modal .checklist-editor-item {
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: 10px;
      min-height: 58px;
    }

    #checklist-settings-modal .checklist-editor-item input[type="text"] {
      min-height: 42px;
      border-color: rgba(39, 68, 125, 0.11);
      background: #f9fafc;
      font-size: 0.78rem;
    }

    #checklist-settings-modal .checklist-editor-item select,
    #checklist-settings-modal .checklist-required-label,
    #checklist-settings-modal .checklist-item-move {
      display: none;
    }

    #checklist-settings-modal .checklist-item-remove {
      width: 36px;
      height: 36px;
      font-size: 1.1rem;
    }

    #checklist-settings-modal .checklist-feedback {
      margin: 12px 0 0;
    }

    #checklist-settings-modal .checklist-editor-actions {
      min-height: 74px;
      justify-content: flex-end;
      margin-top: 18px;
    }

    #checklist-settings-modal .checklist-editor-actions .text-button {
      margin-right: auto;
    }

    #checklist-settings-modal .checklist-editor-actions .form-button {
      min-width: 170px;
    }

    #checklist-settings-modal .checklist-history-view {
      min-height: 510px;
      max-height: calc(100dvh - 230px);
    }

    .daily-phase-switch {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      margin-bottom: 16px;
      padding: 4px;
      border-radius: 8px;
      background: #f1f3f8;
    }

    .daily-phase-switch button {
      min-height: 38px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #71809a;
      cursor: pointer;
      font-size: 0.74rem;
      font-weight: 760;
    }

    .daily-phase-switch button.is-active {
      background: #ffffff;
      color: #10254a;
      box-shadow: 0 2px 7px rgba(23, 42, 82, 0.06);
    }

    .daily-phase-panel[hidden] {
      display: none;
    }

    #daily-checklist-modal .daily-checklist-item {
      grid-template-columns: 28px minmax(0, 1fr);
      min-height: 62px;
    }

    #daily-checklist-modal .daily-run-status,
    #daily-checklist-modal .daily-item-menu {
      display: none;
    }

    #daily-checklist-modal .daily-run-actions button {
      min-height: 44px;
      border-color: #433cea;
      padding-inline: 18px;
      background: #433cea;
      color: #ffffff;
    }

    #daily-checklist-modal .daily-run-remaining {
      color: #71809a;
      font-size: 0.72rem;
      font-weight: 700;
    }

    @media (max-width: 720px) {
      #checklist-settings-modal .checklist-modal-head {
        min-height: 82px;
      }

      #checklist-settings-modal .checklist-template-sidebar {
        min-height: 62px;
        flex-wrap: nowrap;
        padding-inline: 12px;
      }

      #checklist-settings-modal .checklist-template-list {
        flex-wrap: nowrap;
      }

      #checklist-settings-modal .checklist-template-option {
        min-width: 138px;
      }

      #checklist-settings-modal .checklist-editor {
        min-height: 0;
        max-height: none;
        padding: 18px 16px 0;
      }

      #checklist-settings-modal .checklist-editor-grid {
        grid-template-columns: 1fr 1fr;
      }

      #checklist-settings-modal .checklist-name-field {
        grid-column: 1 / -1;
      }

      .checklist-service-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #checklist-settings-modal .checklist-days > div {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      #checklist-settings-modal .checklist-editor-actions {
        min-height: auto;
        align-items: stretch;
        flex-direction: column-reverse;
        margin-inline: -16px;
        padding: 14px 16px 16px;
      }

      #checklist-settings-modal .checklist-editor-actions .form-button,
      #checklist-settings-modal .checklist-editor-actions .text-button {
        width: 100%;
        margin: 0;
      }

      #daily-checklist-modal .daily-run-head {
        align-items: flex-start;
      }

      .daily-checklist-filter {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
        padding: 10px 16px;
      }

      .daily-checklist-filter select {
        width: 100%;
      }
    }