.bento-chat { display: flex; flex-direction: column; gap: 0.35rem; }
    .bento-row { display: flex; }
    .bento-row-you { justify-content: flex-end; }
    .bento-row-sails { justify-content: flex-start; }
    .bento-bubble {
      max-width: 92%;
      margin: 0;
      padding: 0.55rem 0.8rem;
      font-size: 0.95rem;
      line-height: 1.4;
      letter-spacing: -0.015em;
    }
    .bento-you {
      border-radius: 1.15rem 1.15rem 0.28rem 1.15rem;
      background: #007aff;
      color: #fff;
    }
    .bento-sails {
      border-radius: 1.15rem 1.15rem 1.15rem 0.28rem;
      background: #e9e9eb;
      color: #111;
    }
    .dark .bento-sails { background: #2c2c2e; color: #f5f5f7; }
    .bento-tool {
      margin: 0;
      padding: 0.2rem 0;
      text-align: center;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #8e8e93;
    }
    .bento-week {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 0.35rem;
      align-items: end;
      height: 5.5rem;
    }
    .bento-week i {
      display: flex;
      align-items: end;
      justify-content: center;
      border-radius: 0.3rem 0.3rem 0 0;
      background: rgb(3 5 6 / 0.08);
      color: rgb(3 5 6 / 0.4);
      font-size: 0.65rem;
      font-weight: 600;
      font-style: normal;
      padding-bottom: 0.35rem;
      transform: scaleY(0.18);
      transform-origin: bottom;
      transition: transform 520ms ease;
    }
    .dark .bento-week i { background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.4); }
    .bento-week i.is-on { background: #0e1820; color: #fff; }
    .dark .bento-week i.is-on { background: #fff; color: #030506; }
    .bento-card.is-in .bento-week i { transform: scaleY(1); }
    .bento-card.is-in .bento-week i:nth-child(1) { transition-delay: 40ms; }
    .bento-card.is-in .bento-week i:nth-child(2) { transition-delay: 120ms; }
    .bento-card.is-in .bento-week i:nth-child(3) { transition-delay: 80ms; }
    .bento-card.is-in .bento-week i:nth-child(4) { transition-delay: 160ms; }
    .bento-card.is-in .bento-week i:nth-child(5) { transition-delay: 200ms; }
    .bento-card.is-in .bento-week i:nth-child(6) { transition-delay: 240ms; }
    .bento-card.is-in .bento-week i:nth-child(7) { transition-delay: 280ms; }
    .bento-card {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 1rem;
      background: #fff;
      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
    }
    .dark .bento-card {
      background: #161718;
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
    }
    .bento-head {
      padding: 1rem 1.5rem 0.75rem;
    }
    .bento-head h2 {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: #111827;
    }
    .dark .bento-head h2 { color: #fff; }
    .bento-head p { margin: 0.3rem 0 0; font-size: 0.875rem; line-height: 1.5; color: #4b5563; }
    .dark .bento-head p { color: #d1d5db; }
    .bento-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      border-radius: 1rem;
      background: #f9fafb;
      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
    }
    .dark .bento-panel {
      background: #1c1d1f;
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
    }
    .bento-body { flex: 1; padding: 1.5rem; }
    @media (min-width: 640px) {
      .bento-head { padding: 1.1rem 2rem 0.85rem; }
      .bento-body { padding: 2rem; }
    }
    .bento-beat {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 420ms ease, transform 420ms ease;
    }
    .bento-card.is-in .bento-beat { opacity: 1; transform: none; }
    .bento-card.is-in .bento-beat:nth-child(1) { transition-delay: 40ms; }
    .bento-card.is-in .bento-beat:nth-child(2) { transition-delay: 120ms; }
    .bento-card.is-in .bento-beat:nth-child(3) { transition-delay: 200ms; }
    .bento-card.is-in .bento-beat:nth-child(4) { transition-delay: 280ms; }
    .bento-card.is-in .bento-beat:nth-child(5) { transition-delay: 360ms; }
    .bento-card.is-in .bento-beat:nth-child(6) { transition-delay: 440ms; }
    .bento-chat .bento-beat { transition-duration: 640ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(1) { transition-delay: 80ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(2) { transition-delay: 280ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(3) { transition-delay: 480ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(4) { transition-delay: 680ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(5) { transition-delay: 880ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(6) { transition-delay: 1080ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(7) { transition-delay: 1280ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(8) { transition-delay: 1480ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(9) { transition-delay: 1680ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(10) { transition-delay: 1880ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(11) { transition-delay: 2080ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(12) { transition-delay: 2280ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(13) { transition-delay: 2480ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(14) { transition-delay: 2680ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(15) { transition-delay: 2880ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(16) { transition-delay: 3080ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(17) { transition-delay: 3280ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(18) { transition-delay: 3480ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(19) { transition-delay: 3680ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(20) { transition-delay: 3880ms; }
    .bento-card.is-in .bento-chat .bento-beat:nth-child(21) { transition-delay: 4080ms; }
    .bento-bar {
      height: 4px;
      overflow: hidden;
      border-radius: 999px;
      background: rgb(3 5 6 / 0.08);
    }
    .dark .bento-bar { background: rgb(255 255 255 / 0.1); }
    .bento-bar span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: #0e1820;
      transition: width 700ms ease 280ms;
    }
    .dark .bento-bar span { background: #fff; }
    .bento-card.is-in .bento-bar span { width: 72%; }
    .bento-lock-well {
      overflow: hidden;
      padding-bottom: 0;
    }
    .bento-phone {
      width: 14.5rem;
      aspect-ratio: 9 / 19.5;
      margin: 0 auto calc(14.5rem * 19.5 / 9 / -2);
      overflow: hidden;
      border-radius: 1.85rem;
      background: #111;
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 28px rgb(0 0 0 / 0.18);
    }
    .bento-lock {
      position: relative;
      height: 100%;
      min-height: 0;
      padding: 1.1rem 0.9rem;
      background: #0e1820 center/cover no-repeat;
      color: #fff;
    }
    .bento-lock::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgb(0 0 0 / 0.28);
    }
    .bento-lock > * { position: relative; }
    .bento-note {
      margin-top: 1.35rem;
      padding: 0.7rem 0.75rem;
      border-radius: 1rem;
      background: rgb(255 255 255 / 0.22);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .bento-avatar {
      display: grid;
      flex-shrink: 0;
      place-items: center;
      width: 1.7rem;
      height: 1.7rem;
      border-radius: 0.35rem;
      font-size: 0.65rem;
      font-weight: 700;
      color: #fff;
    }
    .bento-cursors {
      position: relative;
      overflow: hidden;
      min-height: 13.5rem;
      background-image:
        linear-gradient(rgb(3 5 6 / 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(3 5 6 / 0.045) 1px, transparent 1px);
      background-size: 20px 20px;
    }
    .dark .bento-cursors {
      background-image:
        linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    }
    .bento-cursor-track {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .bento-cursor {
      width: max-content;
      filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.22));
    }
    .bento-cursor svg { display: block; }
    .bento-cursor em {
      display: block;
      width: max-content;
      margin: -1px 0 0 0.85rem;
      padding: 0.12rem 0.4rem 0.16rem;
      border-radius: 0.3rem;
      background: var(--c);
      color: #fff;
      font-size: 0.65rem;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.01em;
      line-height: 1.2;
    }
    .bento-cursor-track.is-you { --c: #0e1820; }
    .dark .bento-cursor-track.is-you { --c: #f3f4f6; }
    .dark .bento-cursor-track.is-you em { color: #111; }
    .bento-cursor-track.is-sam { --c: #2563eb; }
    .bento-cursor-track.is-alex { --c: #ea580c; }
    .bento-card.is-in .bento-cursor-track.is-you { animation: cursor-you 14s ease-in-out infinite; }
    .bento-card.is-in .bento-cursor-track.is-sam { animation: cursor-sam 18s ease-in-out infinite; }
    .bento-card.is-in .bento-cursor-track.is-alex { animation: cursor-alex 12s ease-in-out infinite; }
    .bento-cursor-track.is-you { transform: translate(14%, 22%); }
    .bento-cursor-track.is-sam { transform: translate(52%, 38%); }
    .bento-cursor-track.is-alex { transform: translate(28%, 58%); }
    @keyframes cursor-you {
      0%, 100% { transform: translate(14%, 22%); }
      28% { transform: translate(58%, 18%); }
      55% { transform: translate(40%, 60%); }
      78% { transform: translate(12%, 48%); }
    }
    @keyframes cursor-sam {
      0%, 100% { transform: translate(52%, 38%); }
      30% { transform: translate(18%, 30%); }
      58% { transform: translate(62%, 64%); }
      80% { transform: translate(36%, 16%); }
    }
    @keyframes cursor-alex {
      0%, 100% { transform: translate(28%, 58%); }
      35% { transform: translate(64%, 42%); }
      62% { transform: translate(20%, 20%); }
      84% { transform: translate(48%, 68%); }
    }
    @keyframes mcp-flow {
      to { stroke-dashoffset: -48; }
    }
    .mcp-line {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.25;
      stroke-dasharray: 5 9;
      opacity: 0.32;
      animation: mcp-flow 2.8s linear infinite;
    }
    .mcp-line:nth-of-type(2) { animation-duration: 3.2s; animation-direction: reverse; }
    .mcp-line:nth-of-type(3) { animation-duration: 2.5s; }
    .mcp-line:nth-of-type(4) { animation-duration: 3.4s; animation-direction: reverse; }
    .mcp-node { color: inherit; }
    .mcp-disc { fill: #f9fafb; }
    .dark .mcp-disc { fill: #1a1b1d; }
    .bento-board {
      overflow: hidden;
      border-radius: 0.75rem;
      background: #fff;
      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
    }
    .dark .bento-board { background: rgb(0 0 0 / 0.28); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
    .bento-board-group {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.7rem 0.9rem 0.55rem;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: #111827;
    }
    .dark .bento-board-group { color: #f9fafb; }
    .bento-board-group i {
      display: block;
      width: 0.28rem;
      height: 1rem;
      border-radius: 999px;
      background: #579bfc;
    }
    .bento-board-group span {
      font-size: 0.7rem;
      font-weight: 600;
      color: #9ca3af;
    }
    .bento-board table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 0.875rem;
    }
    .bento-board th {
      padding: 0.4rem 0.85rem 0.55rem;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #9ca3af;
      border-bottom: 1px solid rgb(0 0 0 / 0.06);
    }
    .dark .bento-board th { border-bottom-color: rgb(255 255 255 / 0.08); }
    .bento-board td {
      padding: 0.55rem 0.85rem;
      border-bottom: 1px solid rgb(0 0 0 / 0.05);
      color: #111827;
    }
    .dark .bento-board td { border-bottom-color: rgb(255 255 255 / 0.06); color: #f3f4f6; }
    .bento-board tr:last-child td { border-bottom: 0; }
    .bento-board td.is-item { font-weight: 600; }
    .bento-board td.is-muted { color: #6b7280; font-weight: 500; }
    .dark .bento-board td.is-muted { color: #9ca3af; }
    .bento-board th.is-status,
    .bento-board td.is-status {
      padding: 0 !important;
      width: 120px;
      min-width: 120px;
      max-width: 120px;
    }
    .bento-board td.is-status {
      position: relative;
      border-bottom: 0;
    }
    .bento-board td.is-status b {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      position: absolute;
      inset: 0;
      width: auto;
      height: auto;
      padding: 0.15rem;
      border-radius: 0;
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.15;
      text-align: center;
      color: #fff;
    }
    .bento-st-wait { background: #fdab3d; color: #1a1200; }
    .bento-st-work { background: #579bfc; }
    .bento-st-review { background: #a25ddc; }
    .bento-st-done { background: #00c875; }
    .bento-board td.is-status b.bento-st-live {
      display: block;
      position: absolute;
      inset: 0;
      width: auto;
      height: auto;
      background: transparent;
      padding: 0;
    }
    .bento-st-live span {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      min-height: 0;
      padding: 0.2rem;
      border-radius: 0;
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.15;
      text-align: center;
    }
    .bento-st-live span:last-child {
      position: absolute;
      inset: 0;
      opacity: 0;
    }
    .bento-card.is-in .bento-st-live span:first-child {
      animation: st-hold-out 6.5s ease-in-out infinite;
    }
    .bento-card.is-in .bento-st-live span:last-child {
      animation: st-hold-in 6.5s ease-in-out infinite;
    }
    @keyframes st-hold-out {
      0%, 38% { opacity: 1; }
      50%, 88% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes st-hold-in {
      0%, 38% { opacity: 0; }
      50%, 88% { opacity: 1; }
      100% { opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .bento-beat, .bento-week i, .bento-bar span { transition: none; }
      .bento-beat { opacity: 1; transform: none; }
      .bento-week i { transform: none; }
      .bento-bar span { width: 72%; }
      .mcp-line { animation: none; stroke-dasharray: none; }
      .bento-cursor-track { animation: none !important; }
      .bento-st-live span { animation: none !important; }
      .bento-st-live span:last-child { opacity: 0; }
    }
    .bento-inbox-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 0.15rem;
    }
    .bento-inbox-head p {
      margin: 0;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: #9ca3af;
    }
    .bento-inbox-head span {
      display: grid;
      place-items: center;
      min-width: 1.15rem;
      height: 1.15rem;
      padding: 0 0.35rem;
      border-radius: 999px;
      background: #007aff;
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
    }
    .bento-inbox-row {
      display: flex;
      gap: 0.55rem;
      align-items: flex-start;
      padding: 0.72rem 0;
      border-top: 1px solid rgb(0 0 0 / 0.06);
    }
    .dark .bento-inbox-row { border-top-color: rgb(255 255 255 / 0.08); }
    .bento-inbox-row i {
      display: block;
      flex-shrink: 0;
      width: 0.42rem;
      height: 0.42rem;
      margin-top: 0.4rem;
      border-radius: 999px;
      background: transparent;
    }
    .bento-inbox-row.is-unread i { background: #007aff; }
    .bento-inbox-row > div { min-width: 0; flex: 1; }
    .bento-inbox-meta {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .bento-inbox-meta b {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.875rem;
      font-weight: 500;
      color: #6b7280;
    }
    .dark .bento-inbox-meta b { color: #9ca3af; }
    .bento-inbox-row.is-unread .bento-inbox-meta b {
      font-weight: 700;
      color: #111827;
    }
    .dark .bento-inbox-row.is-unread .bento-inbox-meta b { color: #f9fafb; }
    .bento-inbox-meta time {
      flex-shrink: 0;
      font-size: 0.7rem;
      font-weight: 600;
      color: #9ca3af;
    }
    .bento-inbox-row.is-unread .bento-inbox-meta time { color: #007aff; }
    .bento-inbox-subj {
      margin: 0.15rem 0 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.82rem;
      font-weight: 500;
      color: #6b7280;
    }
    .dark .bento-inbox-subj { color: #9ca3af; }
    .bento-inbox-row.is-unread .bento-inbox-subj {
      font-weight: 600;
      color: #111827;
    }
    .dark .bento-inbox-row.is-unread .bento-inbox-subj { color: #e5e7eb; }
    .bento-inbox .bento-beat { transition-duration: 520ms; }
    .bento-card.is-in .bento-inbox .bento-beat:nth-child(1) { transition-delay: 40ms; }
    .bento-card.is-in .bento-inbox .bento-beat:nth-child(2) { transition-delay: 140ms; }
    .bento-card.is-in .bento-inbox .bento-beat:nth-child(3) { transition-delay: 240ms; }
    .bento-card.is-in .bento-inbox .bento-beat:nth-child(4) { transition-delay: 340ms; }
    .bento-card.is-in .bento-inbox .bento-beat:nth-child(5) { transition-delay: 440ms; }

a.bento-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; overflow: hidden; }
a.bento-card:hover { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18); }
.dark a.bento-card:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); }