:root {
  color-scheme: dark;
  --bg: #090b10;
  --surface: rgba(20, 24, 33, .88);
  --surface-solid: #141821;
  --surface-2: #1a1f2a;
  --surface-3: #222936;
  --line: rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .14);
  --text: #f4f7fb;
  --muted: #929baa;
  --soft: #c3cad5;
  --accent: #ff7a45;
  --accent-2: #ffad68;
  --good: #55d99b;
  --warn: #ffc866;
  --bad: #ff6d7d;
  --info: #68a9ff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .35);
  --radius: 18px;
  --radius-sm: 12px;
  --sidebar: 264px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body {
  color: var(--text);
  background:
    radial-gradient(circle at 10% -10%, rgba(255, 122, 69, .14), transparent 34rem),
    radial-gradient(circle at 100% 10%, rgba(255, 173, 104, .10), transparent 30rem),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
[v-cloak] { display: none; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 20px 14px;
  border-right: 1px solid var(--line); background: rgba(10, 12, 17, .88);
  backdrop-filter: blur(22px); z-index: 30; display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  font-weight: 900; letter-spacing: -.05em; color: #15100d;
  background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 12px 30px rgba(255, 122, 69, .22);
}
.brand-copy strong { display: block; font-size: 16px; letter-spacing: -.02em; }
.brand-copy span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.nav { display: grid; gap: 5px; overflow: auto; padding-right: 2px; }
.nav-button {
  border: 1px solid transparent; background: transparent; text-align: left; border-radius: 12px;
  padding: 11px 12px; display: flex; gap: 11px; align-items: center; cursor: pointer; color: var(--soft);
  transition: .18s ease;
}
.nav-button:hover { background: rgba(255,255,255,.045); color: var(--text); }
.nav-button.active { background: rgba(255,122,69,.11); color: #fff; border-color: rgba(255,122,69,.24); }
.nav-icon {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  border-radius: 10px; text-align: center; opacity: 1; color: #23120a; font-weight: 900;
  background: linear-gradient(145deg, #ffd08a 0%, var(--accent-2) 42%, var(--accent) 100%);
  box-shadow: 0 7px 18px rgba(255, 122, 69, .16), inset 0 1px 0 rgba(255,255,255,.38);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.nav-button:hover .nav-icon { transform: translateY(-1px) scale(1.04); filter: saturate(1.08); }
.nav-button.active .nav-icon { box-shadow: 0 9px 24px rgba(255,122,69,.28), inset 0 1px 0 rgba(255,255,255,.48); }
.sidebar-footer { margin-top: auto; padding: 16px 7px 2px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.main { min-width: 0; padding: 22px 26px 44px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.topbar-left { min-width: 0; }
.topbar h1 { font-size: clamp(23px, 3vw, 34px); margin: 0; letter-spacing: -.04em; }
.topbar p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.mobile-menu { display: none; }
.profile-pill {
  max-width: 340px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px;
  padding: 9px 12px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.profile-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 5px rgba(85,217,155,.09); }
.profile-pill strong, .profile-pill span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-pill strong { font-size: 12px; }
.profile-pill span { color: var(--muted); font-size: 10px; margin-top: 2px; }

.content { animation: appear .22s ease; }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(18px);
  border-radius: var(--radius); padding: 17px; box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
.card.compact { padding: 13px; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-title h2, .card-title h3 { margin: 0; letter-spacing: -.025em; }
.card-title h2 { font-size: 18px; }
.card-title h3 { font-size: 14px; }
.card-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.metric { min-height: 122px; display: flex; flex-direction: column; justify-content: space-between; }
.metric .label { color: var(--muted); font-size: 12px; }
.metric .value { font-size: 30px; font-weight: 800; letter-spacing: -.05em; margin-top: 14px; }
.metric .hint { color: var(--soft); font-size: 11px; margin-top: 8px; }
.metric.accent { background: linear-gradient(145deg, rgba(255,122,69,.17), rgba(255,122,69,.04)); border-color: rgba(255,122,69,.25); }

.toolbar { display: flex; gap: 9px; align-items: end; flex-wrap: wrap; margin-bottom: 14px; }
.field { display: grid; gap: 6px; min-width: 150px; flex: 1; }
.field.narrow { flex: 0 0 150px; }
.field label { color: var(--muted); font-size: 11px; font-weight: 650; }
.input, .select, .textarea {
  width: 100%; color: var(--text); border: 1px solid var(--line-strong); background: rgba(8,10,14,.66);
  border-radius: 11px; padding: 10px 11px; outline: none; transition: .16s ease;
}
.input:focus, .select:focus, .textarea:focus { border-color: rgba(255,122,69,.7); box-shadow: 0 0 0 3px rgba(255,122,69,.09); }
.textarea { min-height: 95px; resize: vertical; }
.btn {
  border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: 11px; padding: 9px 13px;
  cursor: pointer; white-space: nowrap; transition: .17s ease; font-weight: 700; font-size: 12px;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.primary { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #1a0f09; border-color: transparent; }
.btn.good { color: var(--good); border-color: rgba(85,217,155,.25); background: rgba(85,217,155,.08); }
.btn.bad { color: var(--bad); border-color: rgba(255,109,125,.25); background: rgba(255,109,125,.08); }
.btn.ghost { background: transparent; }
.btn.icon { width: 39px; height: 39px; padding: 0; display: grid; place-items: center; }
.btn.icon:hover { color: #241209; border-color: transparent; background: linear-gradient(145deg, #ffd08a, var(--accent)); box-shadow: 0 8px 20px rgba(255,122,69,.18); }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; min-width: 700px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.025); }
td { font-size: 12px; color: var(--soft); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(255,255,255,.018); }
.primary-text { color: var(--text); font-weight: 700; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; color: var(--soft); }
.badge.good { color: var(--good); border-color: rgba(85,217,155,.25); background: rgba(85,217,155,.07); }
.badge.warn { color: var(--warn); border-color: rgba(255,200,102,.25); background: rgba(255,200,102,.07); }
.badge.bad { color: var(--bad); border-color: rgba(255,109,125,.25); background: rgba(255,109,125,.07); }
.badge.info { color: var(--info); border-color: rgba(104,169,255,.25); background: rgba(104,169,255,.07); }
.empty { padding: 38px 16px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--soft); margin-bottom: 6px; }

.timeline { display: grid; gap: 9px; }
.event { position: relative; border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px 13px 17px; background: rgba(8,10,14,.42); }
.event::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--info); }
.event.risk-high::before { background: var(--bad); }
.event.risk-medium::before { background: var(--warn); }
.event-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.event-head strong { font-size: 12px; }
.event-head time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.event-body { color: var(--soft); font-size: 11px; line-height: 1.55; }
.event-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

.calendar { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 7px; }
.calendar-head { color: var(--muted); font-size: 10px; text-align: center; padding: 5px; }
.day {
  min-height: 54px; border: 1px solid var(--line); background: rgba(8,10,14,.46); border-radius: 11px;
  cursor: pointer; display: grid; place-items: center; font-weight: 750; transition: .16s ease;
}
.day:hover { border-color: var(--line-strong); }
.day.selected { background: rgba(85,217,155,.11); border-color: rgba(85,217,155,.38); color: var(--good); }
.day.past { opacity: .35; cursor: default; }
.day.off { box-shadow: inset 0 0 0 1px rgba(255,200,102,.35); color: var(--warn); }

.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(3,4,7,.78); backdrop-filter: blur(18px); }
.auth-card { width: min(520px, 100%); border: 1px solid var(--line-strong); background: rgba(18,21,29,.96); border-radius: 26px; padding: 25px; box-shadow: var(--shadow); }
.auth-logo { width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center; color: #180e08; font-weight: 900; font-size: 20px; background: linear-gradient(145deg,var(--accent-2),var(--accent)); margin-bottom: 20px; }
.auth-card h1 { margin: 0; font-size: 28px; letter-spacing: -.05em; }
.auth-card > p { color: var(--muted); line-height: 1.6; font-size: 13px; }
.auth-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.auth-option { border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); padding: 16px; cursor: pointer; text-align: left; }
.auth-option:hover { border-color: rgba(255,122,69,.4); }
.auth-option strong { display: block; margin-bottom: 5px; }
.auth-option span { color: var(--muted); font-size: 11px; }
.auth-status { margin-top: 15px; border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: rgba(8,10,14,.55); }
.auth-status .code { font-size: 18px; letter-spacing: .18em; font-weight: 850; margin: 7px 0; }
.pin-grid { display: grid; gap: 10px; margin-top: 17px; }
.pin-input { text-align: center; font-size: 25px; letter-spacing: .4em; font-weight: 850; }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(3,4,7,.7); backdrop-filter: blur(10px); }
.modal { width: min(640px, 100%); max-height: min(82vh, 760px); overflow: auto; border: 1px solid var(--line-strong); background: var(--surface-solid); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); }
.profile-list { display: grid; gap: 8px; }
.profile-option { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 13px; padding: 13px; cursor: pointer; text-align: left; }
.profile-option.active { border-color: rgba(85,217,155,.38); background: rgba(85,217,155,.07); }
.profile-option strong { display: block; font-size: 13px; }
.profile-option span { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }

.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 140; width: min(390px, calc(100vw - 36px)); display: grid; gap: 8px; }
.toast { border: 1px solid var(--line-strong); background: rgba(22,26,35,.97); border-radius: 13px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 12px; animation: toast .2s ease; }
.toast.error { border-color: rgba(255,109,125,.38); }
.toast.success { border-color: rgba(85,217,155,.38); }
@keyframes toast { from { opacity:0; transform: translateY(7px); } }
.loading-bar { position: fixed; z-index: 200; top: 0; left: 0; height: 2px; width: 42%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: load 1s linear infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

.mobile-backdrop { display: none; }
@media (max-width: 1080px) {
  .grid.cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); transition: .2s ease; width: min(290px, 86vw); }
  .sidebar.open { transform: translateX(0); }
  .mobile-backdrop { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.58); }
  .main { padding: 17px 14px 36px; }
  .mobile-menu { display: grid; }
  .profile-pill { max-width: 210px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .topbar { align-items: flex-start; }
  .topbar h1 { font-size: 24px; }
  .topbar p { display: none; }
  .profile-pill { width: 43px; height: 43px; padding: 0; display: grid; place-items: center; }
  .profile-pill > div:last-child { display: none; }
  .auth-options { grid-template-columns: 1fr; }
  .card { padding: 14px; }
  .calendar { gap: 4px; }
  .day { min-height: 44px; }
}

/* Internal operations platform */
.operations-split { display:grid; grid-template-columns:minmax(250px,330px) minmax(0,1fr); gap:14px; align-items:stretch; }
.chat-layout { min-height:calc(100vh - 165px); }
.room-list-panel, .chat-panel { min-height:650px; }
.room-list-panel { overflow:auto; }
.room-item { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid transparent; background:transparent; border-radius:12px; padding:11px; color:var(--text); text-align:left; cursor:pointer; }
.room-item:hover, .room-item.active { background:rgba(255,255,255,.045); border-color:var(--line); }
.room-item strong, .room-item small { display:block; }
.room-item small { color:var(--muted); margin-top:4px; font-size:10px; }
.unread { min-width:22px; height:22px; border-radius:999px; display:grid; place-items:center; background:var(--accent); color:#170d08; font-size:10px; }
.chat-panel { display:flex; flex-direction:column; padding-bottom:12px; }
.chat-head { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; }
.chat-head h2, .chat-head p { margin:0; }
.chat-head p { margin-top:4px; color:var(--muted); font-size:11px; }
.chat-messages { flex:1; min-height:420px; max-height:calc(100vh - 365px); overflow:auto; padding:14px 2px; display:flex; flex-direction:column; gap:10px; }
.chat-message { max-width:min(720px,90%); border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:13px; padding:10px 12px; }
.chat-message > div { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.chat-message strong { font-size:11px; }
.chat-message time { color:var(--muted); font-size:9px; }
.chat-message p { white-space:pre-wrap; margin:7px 0 0; line-height:1.5; color:var(--soft); font-size:12px; }
.chat-compose { border-top:1px solid var(--line); padding-top:12px; display:grid; grid-template-columns:1fr auto; gap:8px; position:relative; }
.chat-compose .typing { position:absolute; top:-20px; left:3px; color:var(--muted); font-size:10px; }
.chat-compose .textarea { min-height:62px; }
.form-stack { display:grid; gap:9px; }
.compact-form { border:1px solid var(--line); border-radius:13px; padding:10px; margin-bottom:10px; background:rgba(0,0,0,.12); }
.mini-label { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.multi-select { min-height:84px; }
.toolbar-inline { display:flex; gap:8px; align-items:center; }
.task-create { display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(180px,1fr) 130px minmax(180px,1fr) auto; gap:8px; margin-top:12px; }
.kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(270px,1fr); gap:12px; overflow-x:auto; padding:2px 0 14px; margin-top:14px; }
.kanban-column { border:1px solid var(--line); border-radius:15px; background:rgba(8,10,14,.45); min-height:360px; }
.kanban-column > header { display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--line); }
.kanban-column > header span { color:var(--muted); font-size:10px; }
.kanban-list { padding:9px; display:grid; gap:9px; }
.task-card { border:1px solid var(--line); border-radius:12px; background:var(--surface-2); padding:11px; box-shadow:0 7px 22px rgba(0,0,0,.1); }
.task-card strong { display:block; font-size:12px; margin-top:5px; }
.task-card p { color:var(--muted); font-size:10px; line-height:1.45; min-height:28px; }
.task-key { color:var(--accent-2); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.small-select { min-height:34px; padding:6px 8px; font-size:10px; }
.team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.team-card { border:1px solid var(--line); border-radius:13px; padding:12px; background:rgba(255,255,255,.025); }
.team-card strong, .team-card span { display:block; }
.team-card span { color:var(--accent-2); font-size:10px; margin-top:4px; }
.team-card p { color:var(--muted); font-size:10px; line-height:1.45; }
.profile-hero { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.profile-hero h2, .profile-hero p { margin:0; }
.profile-hero p { color:var(--muted); margin-top:4px; }
.profile-avatar { width:58px; height:58px; display:grid; place-items:center; border-radius:17px; background:linear-gradient(145deg,var(--accent-2),var(--accent)); color:#170d08; font-weight:900; }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.stats-grid > div { border:1px solid var(--line); border-radius:11px; padding:10px; }
.stats-grid span, .stats-grid strong { display:block; }
.stats-grid span { color:var(--muted); font-size:9px; text-transform:uppercase; }
.stats-grid strong { margin-top:5px; font-size:18px; }
.storage-toolbar { display:grid; grid-template-columns:1fr auto 1.4fr auto; gap:8px; }
.folder-row { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.folder-card { border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--soft); padding:9px 12px; cursor:pointer; }
.folder-card:hover { border-color:var(--line-strong); }
.asset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.asset-card { border:1px solid var(--line); border-radius:13px; padding:12px; display:grid; gap:8px; background:rgba(255,255,255,.025); }
.asset-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset-card span { color:var(--muted); font-size:9px; }
.asset-icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg,#ffd08a,var(--accent)); color:#23120a; box-shadow:0 9px 22px rgba(255,122,69,.16); font-weight:900; font-size:10px; }
.session-list { margin-top:15px; border-top:1px solid var(--line); padding-top:13px; }
.session-item { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; border-bottom:1px solid var(--line); padding:9px 0; font-size:10px; color:var(--soft); }
.meeting-card a { color:var(--accent-2); }
@media (max-width:1100px) { .task-create { grid-template-columns:1fr 1fr; } .asset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px) { .operations-split { grid-template-columns:1fr; } .room-list-panel, .chat-panel { min-height:auto; } .chat-messages { min-height:330px; max-height:55vh; } .task-create, .storage-toolbar { grid-template-columns:1fr; } }
@media (max-width:520px) { .team-grid, .stats-grid, .asset-grid { grid-template-columns:1fr; } .session-item { grid-template-columns:1fr; } }
.board-create-grid { display:grid; grid-template-columns:1fr 160px 130px 1fr 1fr auto; gap:8px; margin-top:12px; }
.sprint-strip { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding:10px; border:1px solid var(--line); border-radius:13px; }
.workflow-editor { margin-top:12px; border:1px solid var(--line); border-radius:13px; padding:11px; }
.workflow-editor summary { cursor:pointer; font-weight:750; margin-bottom:9px; }
.workflow-editor .textarea { min-height:240px; margin-bottom:8px; }
@media (max-width:1200px) { .board-create-grid { grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:720px) { .board-create-grid { grid-template-columns:1fr; } }
.task-open { width:100%; margin-top:7px; }
.task-modal { width:min(820px,100%); }
.task-comments { display:grid; gap:8px; margin-top:16px; }
.task-open { width:100%; margin-top:7px; }
.task-modal { width:min(820px,100%); }
.task-comments { display:grid; gap:8px; margin-top:16px; }
.team-button { color:var(--text); text-align:left; cursor:pointer; width:100%; }
.team-button.active { border-color:rgba(255,122,69,.42); background:rgba(255,122,69,.07); }
.tall-select { min-height:180px; }
.storage-scope { display:grid; grid-template-columns:150px 1fr 1fr 1fr; gap:8px; margin-bottom:8px; }
@media (max-width:900px) { .storage-scope { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .storage-scope { grid-template-columns:1fr; } }
.notification-button { position:relative; }
.notification-button b { position:absolute; right:-4px; top:-5px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; display:grid; place-items:center; background:var(--bad); color:white; font-size:9px; }
.event.unreadEvent { border-color:rgba(255,122,69,.32); }