:root{
  --brand:#2ecc71; --ink:#111827; --muted:#6b7280; --bg:#f8fafc;
  --ring:rgba(46,204,113,.35); --radius:12px;
}

/* Prevent flash of unstyled content */
html{visibility:hidden;scroll-behavior:smooth}
html.loaded{visibility:visible}
body.page-loaded{animation:fadeIn 0.3s ease-in}

@keyframes fadeIn{
  from{opacity:0.9;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 ui-sans-serif,system-ui;color:var(--ink);background:var(--bg);transition:opacity 0.15s ease-in-out}

/* Smooth page transitions to prevent flashing */
html{scroll-behavior:smooth}
body.page-transition{opacity:0.95}

/* Enhanced tab transition effects */
.tabs a{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:10px;color:#374151;text-decoration:none;transition:all 0.2s ease,transform 0.15s ease}
.tabs a:hover{background:#f3f4f6;transform:translateY(-1px)}
.tabs a.active{background:rgba(46,204,113,.12);color:#065f46;transform:translateY(-1px);box-shadow:0 2px 4px rgba(46,204,113,0.1)}

.container{max-width:1200px;margin:0 auto;padding:0 20px}
header.navbar{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:20;padding:0;transition:box-shadow 0.2s ease}
.navbar-inner{display:flex;align-items:center;gap:24px;height:64px}

/* Fix spacing issues - ensure content doesn't overlap with sticky navbar */
main{margin-top:20px;opacity:1;transition:opacity 0.2s ease}
.section.page-header{padding-top:80px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}

.menu-toggle{display:none}
nav.tabs{display:flex;gap:16px;margin-left:24px}
.actions{margin-left:auto;display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#111827;text-decoration:none;cursor:pointer;transition:transform .02s ease,background .2s ease,box-shadow .2s ease}
.btn:hover{background:#f9fafb}
.btn:focus{outline:2px solid var(--ring);outline-offset:4px}
.btn:active{transform:translateY(1px)}
.btn-sm{height:36px;padding:0 12px;border-radius:10px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:transparent;border-color:transparent;color:#374151}
.btn-ghost:hover{background:#f3f4f6}

/* Ensure header buttons use the unified system even if pages define their own .btn */
header.navbar .btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#111827;text-decoration:none;cursor:pointer;transition:transform .02s ease,background .2s ease,box-shadow .2s ease}
header.navbar .btn-sm{height:36px;padding:0 12px;border-radius:10px}
header.navbar .btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
header.navbar .btn-primary:hover{filter:brightness(.95)}
header.navbar .btn-ghost{background:transparent;border-color:transparent;color:#374151}
header.navbar .btn-ghost:hover{background:#f3f4f6}
@media (max-width:768px){
  .navbar-inner{height:56px}
  .menu-toggle{display:inline-flex}
  nav.tabs{display:none;flex-direction:column;margin:8px 0}
  nav.tabs.open{display:flex}
}

/* Modern brand logo and text styling */
.brand-logo{width:36px;height:36px;display:block;object-fit:contain;image-rendering:-webkit-optimize-contrast;border-radius:8px;box-shadow:0 2px 8px rgba(34,197,94,0.15)}
.brand img, .brand-logo{filter:none;mix-blend-mode:normal}
.brand{color:var(--ink);transition:all 0.2s ease;text-decoration:none!important;font-size:24px;font-weight:800}
.brand:hover{transform:translateY(-1px);color:var(--ink)!important;text-decoration:none!important}
.brand:hover .brand-logo{box-shadow:0 4px 12px rgba(34,197,94,0.25)}
.brand span{color:var(--ink)!important;text-decoration:none!important;border:none!important}