/* ZEBRA shell for Logbook: a slim ZEBRA bar (you are inside ZEBRA) over a bold
   Logbook bar (you are in Logbook). Same mark, wordmark and stripes as ZEBRA's
   own pages; system fonts because Logbook's CSP allows no external fonts. */
:root {
  --zb-ink: #1A2332; --zb-blue: #009BDE;
  --lb-green: #1F5D47; --lb-green-2: #2F7A5E; --lb-mint: #BFE8D4;
}
.zebra-bar {
  background: var(--zb-ink); color: #fff; height: 40px; padding: 0 24px;
  display: flex; align-items: center; gap: 16px; font: 13px/1 system-ui, -apple-system, sans-serif;
}
.zb-home { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none;
           font-weight: 800; font-size: 13px; letter-spacing: .22em; }
.zb-home img { height: 18px; width: auto; display: block; }
.zb-stripes { display: flex; gap: 2px; } .zb-stripes i { width: 7px; height: 2px; border-radius: 1px; background: var(--zb-blue); transform: skewX(-35deg); }
.zb-stripes i:nth-child(2) { opacity: .55; } .zb-stripes i:nth-child(3) { opacity: .25; }
.zb-back { color: rgba(255,255,255,.6); text-decoration: none; font-size: 12px; }
.zb-back:hover { color: #fff; }
.zb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.7); }
.zb-right a { color: #fff; }

.app-bar {
  background: linear-gradient(120deg, var(--lb-green) 0%, var(--lb-green-2) 100%); color: #fff;
  padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 28px;
  position: relative; overflow: hidden;
}
/* Container-ribs motif off the right edge — Logbook's echo of ZEBRA's stripes. */
.app-bar::after { content: ''; position: absolute; top: 0; bottom: 0; right: -20px; width: 260px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 6px, transparent 6px 16px); pointer-events: none; }
.app-name { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
            font: 800 24px/1 system-ui, -apple-system, sans-serif; letter-spacing: -.01em; }
.app-name svg { width: 26px; height: 26px; color: var(--lb-mint); }
.app-nav { display: flex; gap: 4px; position: relative; z-index: 1; }
.app-nav a { color: rgba(255,255,255,.78); text-decoration: none; font: 600 14px/1 system-ui, -apple-system, sans-serif;
             padding: 8px 12px; border-radius: 6px; }
.app-nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.app-nav a.on { color: var(--lb-green); background: #fff; }

@media (max-width: 640px) {
  .zebra-bar, .app-bar { padding: 0 14px; }
  .zb-back, .zb-right .who { display: none; }
  .app-bar { height: 56px; gap: 14px; }
  .app-name { font-size: 20px; }
  .app-nav a { padding: 6px 8px; font-size: 13px; }
  .app-bar::after { width: 120px; }
}