通知センターパネル(固定・未読表示)

<div class="d11-08-06-card">
          <div class="d11-08-06-head">
            <span>通知センター <b class="d11-08-06-badge">3</b></span>
            <span class="d11-08-06-readall">すべて既読</span>
          </div>
          <ul class="d11-08-06-list">
            <li class="is-unread"><span class="d11-08-06-dot"></span><div><b>新しいコメント</b>が投稿されました<em>5分前</em></div></li>
            <li class="is-unread"><span class="d11-08-06-dot"></span><div><b>プラグイン更新</b>が利用可能です<em>1時間前</em></div></li>
            <li class="is-unread"><span class="d11-08-06-dot"></span><div><b>バックアップ</b>が完了しました<em>3時間前</em></div></li>
            <li><span class="d11-08-06-dot"></span><div>月次レポートを生成しました<em>昨日</em></div></li>
          </ul>
        </div>

.d11-08-06{background:#f8fafc}
        .d11-08-06-card{width:280px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px 16px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d11-08-06-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:#475569;margin-bottom:8px}
        .d11-08-06-badge{background:#ef4444;color:#fff;font-size:10px;border-radius:10px;padding:1px 7px;margin-left:4px;font-weight:700}
        .d11-08-06-readall{font-size:11px;color:#3b82f6;font-weight:600}
        .d11-08-06-list{list-style:none;margin:0;padding:0}
        .d11-08-06-list li{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-top:1px solid #f1f5f9;font-size:12.5px;color:#64748b}
        .d11-08-06-list li:first-child{border-top:none}
        .d11-08-06-list b{color:#0f172a;font-weight:700}
        .d11-08-06-list em{display:block;font-style:normal;font-size:10.5px;color:#94a3b8;margin-top:2px}
        .d11-08-06-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:transparent;margin-top:4px}
        .d11-08-06-list li.is-unread{color:#334155}
        .d11-08-06-list li.is-unread .d11-08-06-dot{background:#3b82f6}