:root {
      --backdrop: rgba(0,0,0,0.5);
      --panel-bg: #ffffff;
      --text: #111827;
      --muted: #6b7280;
      --accent: #006633;
      --accent-contrast: #ffffff;
      --close-bg: #ffc600;
      --close-text: #ffffff;
      --radius: 16px;
    }

    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; margin: 0; }

    .notice-backdrop {
      position: fixed; inset: 0; background: var(--backdrop);
      display: flex; align-items: center; justify-content: center;
      padding: 24px; z-index: 1000; opacity: 0; pointer-events: none;
      transition: opacity .25s ease;
    }
    .notice-backdrop.show { opacity: 1; pointer-events: auto; }

    .notice-panel {
      width: min(700px, 92vw);
      background: var(--panel-bg);
      color: var(--text);
      border-radius: var(--radius);
      box-shadow: 0 10px 30px rgba(0,0,0,.2);
      overflow: hidden;
      transform: translateY(12px) scale(.98);
      transition: transform .25s ease;
      max-height: 90vh;
      overflow-y: auto;
    }
    .notice-backdrop.show .notice-panel { transform: translateY(0) scale(1); }

    .notice-header { display:flex; align-items:center; justify-content: space-between; padding: 16px 18px; background: var(--accent); color: var(--accent-contrast); }
    .notice-title { font-size: 1.05rem; font-weight: 700; margin: 0; }

    .notice-body { padding: 18px; line-height: 1.6; text-align: justify; }
    .notice-footer { padding: 14px 18px; display:flex; align-items:center; justify-content: space-between; background:#f9fafb; border-top: 1px solid #e5e7eb; }

    .btn-close {
      display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
      background: var(--close-bg); border: none; padding: 8px 12px; border-radius: 999px;
      font-weight: 600; color: var(--close-text);
      transition: transform .05s ease, opacity .2s ease, background .2s ease;
    }
    .btn-close:hover { background: var(--close-bg); opacity: 0.9; }
    .btn-close:active { transform: translateY(1px); }

    .badge {
      font-variant-numeric: tabular-nums; font-weight: 700;
      background: var(--accent); color: var(--accent-contrast);
      padding: 6px 10px; border-radius: 999px; min-width: 2ch; text-align: center;
    }

    .muted { color: var(--muted); }

    @media (prefers-reduced-motion: reduce) {
      .notice-backdrop, .notice-panel { transition: none; }
    }