/* 通知中心（桌機 popover / 手機 bottom sheet）（CSS 架構重構 P3 自 legacy/core.css 拆出） */
@layer components {
  /* Notification Summary Center：Desktop Popover / Mobile Bottom Sheet */
  .notif-panel {position:fixed;top:62px;right:24px;width:min(400px,calc(100vw - 32px));max-height:min(80vh,560px);display:none;flex-direction:column;background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:0 16px 40px rgba(15,23,42,.18);z-index:var(--z-notif);overflow:hidden}
  .notif-panel.is-open {display:flex}
  .notif-panel-header {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px 14px;border-bottom:1px solid var(--c-border);background:var(--c-white)}
  .notif-panel-header h2 {margin:0;color:var(--c-text);font-size:var(--fs-16);line-height:1.25}
  .notif-panel-header p {margin:4px 0 0;color:var(--c-muted);font-size:var(--fs-12);line-height:1.4}
  .notif-close {display:none;width:32px;height:32px;flex:0 0 32px;border:0;border-radius:var(--r-md);background:var(--c-surface-2);color:var(--c-text-2);cursor:pointer;font-size:var(--fs-16)}
  .notif-close:hover,.notif-close:focus-visible {background:var(--c-border);outline:2px solid color-mix(in srgb, var(--c-primary) 18%, transparent)}
  .notif-list {min-height:0;overflow-y:auto;padding:8px}
  .notif-category {--notif-accent:var(--c-muted);display:grid;grid-template-columns:32px minmax(0,1fr) auto 16px;align-items:center;gap:10px;width:100%;padding:14px 10px;border:0;border-bottom:1px solid var(--c-surface-2);border-radius:var(--r-md);background:var(--c-white);color:var(--c-text);text-align:left;cursor:pointer}
  .notif-category:last-child {border-bottom:0}
  .notif-category:hover,.notif-category:focus-visible {background:var(--c-white);outline:2px solid color-mix(in srgb,var(--notif-accent) 22%,transparent);outline-offset:-2px}
  .notif-category-icon {display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-md);background:color-mix(in srgb,var(--notif-accent) 12%,var(--c-white));font-size:var(--fs-16)}
  .notif-category-copy {display:flex;flex-direction:column;gap:3px;min-width:0}
  .notif-category-copy strong {color:var(--c-text);font-size:var(--fs-14);line-height:1.25}
  .notif-category-copy small {overflow:hidden;color:var(--c-muted);font-size:var(--fs-12);line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
  .notif-category-count {color:var(--notif-accent);font-size:var(--fs-14);font-weight:var(--fw-bold);white-space:nowrap}
  .notif-category-arrow {color:var(--c-border-control);font-size:var(--fs-28);line-height:1}
  .notif-category.is-out {--notif-accent:var(--c-danger)}
  .notif-category.is-low {--notif-accent:var(--c-warning)}
  .notif-category.is-kit {--notif-accent:var(--c-prepare-solid)}
  .notif-category.is-kit-secondary {--notif-accent:var(--c-warning)}
  .notif-category.is-reminder {--notif-accent:var(--c-primary)}
  .notif-normal,.notif-error {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:170px;padding:24px 16px;color:var(--c-muted);text-align:center}
  .notif-normal span {display:grid;place-items:center;width:42px;height:42px;margin-bottom:10px;border-radius:50%;background:var(--c-success-soft);color:var(--c-success);font-size:var(--fs-20)}
  .notif-normal strong,.notif-error strong {color:var(--c-text-2);font-size:var(--fs-14)}
  .notif-normal small,.notif-error small {margin-top:5px;font-size:var(--fs-12)}
  .notif-skeleton {display:flex;flex-direction:column;gap:12px;padding:14px 10px}
  .notif-skeleton span {display:block;height:54px;border-radius:var(--r-md);background:linear-gradient(90deg,var(--c-surface-2),var(--c-border),var(--c-surface-2));background-size:200% 100%;animation:notif-skeleton 1.2s ease-in-out infinite}
  @keyframes notif-skeleton {from{background-position:200% 0}to{background-position:-200% 0}}
  .notif-backdrop {display:none}
  body.notification-sheet-open {overflow:hidden}
  @media (max-width: 767px) {
    .notif-panel {top:auto;right:0;bottom:0;left:0;width:100%;max-height: 82vh;max-height: 82dvh;border-radius: var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.2)}
    .notif-panel-header {padding:22px 18px 16px}
    .notif-close {display:block}
    .notif-list {padding:10px 12px 18px}
    .notif-category {padding:16px 8px;grid-template-columns:34px minmax(0,1fr) auto 14px}
    .notif-category-copy strong {font-size:var(--fs-14)}
    .notif-category-copy small {font-size:var(--fs-12);white-space:normal}
    .notif-backdrop.is-open {display:block;position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:var(--z-notif-backdrop)}
  }
}