/* Demo Dashboard only: the demo bar, the "Demo only" note and the Archive tour. */
#fcDemoBar { position: fixed; top: 0; left: 0; right: 0; z-index: 150; box-sizing: border-box; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  background: #F9ECE8; color: #8C300E; border-bottom: 1px solid #F0CFC2; padding: 8px 16px; font-size: 13px; line-height: 1.45; }
#fcDemoBar strong { font-weight: 700; }
#fcDemoBar .fc-demo-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#fcDemoBar button, #fcDemoBar a { font: inherit; font-weight: 700; font-size: 13px; border-radius: 9px; padding: 6px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; }
#fcDemoTourBtn { background: #fff; color: #8C300E; border: 1.5px solid #F0CFC2; }
#fcDemoTourBtn:hover { border-color: #C84514; }
#fcDemoBar .fc-demo-cta { background: #2A7454; color: #fff; border: 1.5px solid #2A7454; }
#fcDemoBar .fc-demo-cta:hover { background: #2F7F5D; border-color: #2F7F5D; }
.fc-demo-tag { display: inline-block; margin-left: 8px; background: #C84514; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 6px; padding: 2px 7px; vertical-align: middle; }
@media (max-width: 680px) {
  #fcDemoBar { padding: 6px 12px; }
  #fcDemoBar .fc-demo-sub { display: none; }
  .fc-demo-tag { font-size: 10px; padding: 2px 5px; margin-left: 4px; }
  body.fc-demo .tb-avatar { display: none; }
  body.fc-demo .tb-signout { white-space: nowrap; }
}

#fcDemoNote { position: fixed; top: calc(var(--fc-demo-h, 44px) + 76px); left: 50%; transform: translate(-50%, -12px); opacity: 0; pointer-events: none; z-index: 10000;
  display: flex; align-items: center; gap: 14px; background: #F9ECE8; color: #8C300E; border: 1px solid #F0CFC2; border-radius: 14px;
  padding: 12px 18px; font-size: 15px; box-shadow: 0 8px 28px rgba(0,0,0,.12); transition: opacity .2s, transform .2s; }
#fcDemoNote.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#fcDemoNote a { color: #2A7454; font-weight: 700; font-size: 13px; text-decoration: underline; }

.fc-demo-inline { background: #F9ECE8; color: #8C300E; border: 1px solid #F0CFC2; border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.45; margin-bottom: 8px; }

#fcTourSpot { position: fixed; z-index: 9990; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; transition: all .25s; }
#fcTourCard { position: fixed; z-index: 9995; background: #fff; color: #1A1A1A; border-radius: 14px; padding: 16px 18px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); font-size: 14px; line-height: 1.55; }
#fcTourCard .fc-tour-count { font-size: 11px; font-weight: 700; color: #2A7454; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
#fcTourCard .fc-tour-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
#fcTourCard .fc-tour-text { margin: 0 0 12px; color: #333; }
#fcTourCard .fc-tour-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
#fcTourCard button { font: inherit; font-size: 13px; font-weight: 700; border-radius: 9px; padding: 7px 14px; cursor: pointer; border: 1.5px solid #DDDDDD; background: #fff; color: #1A1A1A; }
#fcTourCard .fc-tour-next { background: #2A7454; border-color: #2A7454; color: #fff; }
@media (hover: hover) { #fcTourCard .fc-tour-next:hover { background: #2F7F5D; border-color: #2F7F5D; } }
#fcTourCard button:focus-visible, #fcDemoBar button:focus-visible, #fcDemoBar a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(42,116,84,.35); }

/* Make room for the demo bar above the Dashboard's own top bar. */
:root { --fc-demo-h: 44px; }
body.fc-demo .topbar { top: var(--fc-demo-h); }
body.fc-demo .sidebar { top: calc(var(--topbar-h) + var(--fc-demo-h)); }
body.fc-demo .app-body { margin-top: calc(var(--topbar-h) + var(--fc-demo-h)); }
body.fc-demo .test-banner { top: calc(var(--topbar-h) + var(--fc-demo-h)); }