.notification-list { list-style: none; padding: 0; margin: 20px 0 0; }
.notification-list li { padding: 14px 4px; border-bottom: 1px solid #444653; }
.notification-list li.unread { border-left: 3px solid #dc7d46; padding-left: 12px; }
.notification-list strong, .notification-list small { display: block; margin-bottom: 5px; }
.notification-list small { color: #b2b2b2; }
.notification-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notification-toast { position: fixed; bottom: 48px; right: 20px; z-index: 1000; max-width: min(440px, calc(100vw - 32px)); padding: 16px; background: #303342; color: #dadada; border: 1px solid #dc7d46; border-radius: 12px; box-shadow: 0 8px 32px #0008; }
.notification-toast button { color: #dadada; background: transparent; border: 0; cursor: pointer; padding: 8px; }
#notification-form { margin: 12px 0; }
#notifications-dialog { max-height: 88dvh; overflow-y: auto; }
#profile-edit-form label { display: grid; gap: 6px; margin: 14px 0; }
#test-account-logout { margin-top: 16px; }
#btn-notifications { position: relative; }
#btn-notifications[data-unread]:not([data-unread=""])::after { content: attr(data-unread); position: absolute; right: -3px; top: -3px; border-radius: 10px; padding: 1px 4px; font-size: 10px; background: #dc7d46; color: #15171e; }
@media (max-width: 680px) {
  body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
  .main-nav { grid-column: 1; grid-row: 5; flex-direction: row; padding: 4px 8px max(4px, env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid #444653; }
  .main-nav .area-btn { flex: 1; min-height: 54px; gap: 3px; padding: 5px; font-size: 12px; }
  .nav-footnote { display: none; }
  .workspace-controls, body > .area-panel { grid-column: 1; }
  .foot { grid-column: 1; grid-row: 4; }
  .chart-grid:is(.layout-1, .layout-2h, .layout-2v, .layout-3, .layout-4, .layout-6) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(290px, 1fr); overflow-y: auto; }
  .setup-dialog .rule-form > label, .event-predicate > label { flex-wrap: wrap; }
  .setup-dialog input, .setup-dialog select, .setup-dialog textarea { max-width: 100%; box-sizing: border-box; }
  .account-tools .icon-btn, .profile-button { min-width: 40px; min-height: 40px; }
  .shell-dialog { width: calc(100vw - 20px); max-width: none; box-sizing: border-box; }
  .notification-actions > button { flex: 1 1 45%; min-height: 44px; }
  .notification-toast { bottom: 74px; right: 12px; }
}